The language selector flags are not displaying correctly on Webflow with Localize: how to fix it?

Restore an elegant and functional language selector

Key points:

• Localize flags may not display due to a CSS conflict or a widget loading error.
• The problem is often fixed by resetting or reinstalling the selector.
• A well-displayed selector enhances the credibility and clarity of your multilingual hotel website.

When flags disappear or display incorrectly (missing icons, incorrect sizes, poor alignment), it's usually due to a style or scripting issue. Here's how to restore a clean, visible language selector that aligns with your Webflow design.

Step 1: Verify that the Localize script is loading

1. Access your Webflow project → Project Settings → Custom Code.

Make sure the Localize script is present in the Before section: <script src="https://global.localizecdn.com/localize.js"></script>

<script>

Localize.initialize({

key: 'YOUR_PROJECT_KEY',

rememberLanguage: true,

detectLanguage: true

});

</script>

2. Republish the site. If the script is missing or truncated, the selector will not be able to load the flag icons correctly.

💡 Tip: Flags are integrated into the Localize script, so any loading error will prevent them from being displayed.

Step 2: Check the selector settings in Localize

1. Log in to your Localize account.
2. Go to Settings → Language Selector.
3. Check the display options:
   • ✅ “Show flags” must be enabled.
   • Select your preferred style (Classic, Rounded, or Minimal).
   • Save and republish.

💡 Tip: If you have disabled the display of flags to lighten the widget, Localize retains this preference even after a republication.

Step 3: Reset or regenerate the selector widget

If the problem persists:

1. In Localize → Settings → Language Selector, click Reset Widget.
2. Choose a selector style again (floating or integrated).
3. Enable the "Show flags" option and save.
4. Republish your Webflow site.

💡 Tip: Resetting reloads the widget's stylesheet and often fixes display issues.

Step 4: Check the CSS and for any interference with Webflow

Certain custom CSS rules in Webflow may hide or distort flags.

1. Open the Webflow Designer.
2. Check if there are any global rules targeting images or icons (for example, `.img { display: none; }`).

Add a global fix code to your Custom Code (Before </body>): .localize-language-selector img {

  display: inline-block !important;

width: 20px !important;

height: auto !important;

margin-right: 6px;

vertical-align: middle;

}

2. Save, republish, and test on multiple screen sizes.

💡 Tip: If you are using a header or footer with a white background, make sure your flags do not blend into the background.

Step 5: Check for browser or display restrictions

• Temporarily disable content blockers (AdBlock, Ghostery, Brave Shield, etc.): some block flagged CDNs.
• Try it in another browser (Chrome, Safari, Firefox).
• If the flags are displayed elsewhere, it indicates a local cache or extension conflict.

💡 Tip: Clear your browser cache to force the widget resources to reload.

---

Step 6: Customize the flags if needed

If you wish to have complete control over the appearance of the flags:

1. In Localize, disable “Show flags”.
2. Integrate your own language selector into Webflow (with SVG or PNG icons).

Connect each button to a Localize command: <a href="#" onclick="Localize.setLanguage('en');">🇬🇧 English</a>

<a href="#" onclick="Localize.setLanguage('fr');">🇫🇷 French</a>

💡 Tip: This method allows you to harmonize the selector design with your graphic charter.

---

Best practices for hotels

• Check that the selector displays correctly on all pages and resolutions.
• Avoid hiding the selector in pop-ups or dynamic headers.
• Opt for simple, uniform flags without excessive borders or shadows.
• If you are targeting multiple markets, place the selector in the header for better accessibility.

Conclusion

The flags in the Localize selector may stop displaying due to a missing script, conflicting CSS, or a corrupted widget. By resetting the selector and checking your settings in Localize and Webflow, you can quickly fix the problem and restore a clean, professional display—essential for your multilingual hotel website.