Webflow sync, pageviews & more.
NEW

How can I fix an issue where the menu is not present on my Webflow site when published, even though it works fine in preview mode? I've tried rebuilding the interactions, removing custom code, and rebuilding the menu, but nothing seems to work. Can you please help me?

TL;DR
  • Republish the site, clear browser cache, or use incognito mode to ensure you're seeing the latest version.
  • Check that all menu elements are visible (not set to "display: none") and that interactions trigger on page load.
  • Confirm the menu is properly placed on each page, not hidden by conditional logic or login state dependencies.
  • Inspect the live site using browser DevTools to check element visibility and identify console errors or styling issues.
  • Review custom code for scripts affecting visibility, jQuery conflicts, or improperly closed tags.
  • Test in a clean duplicate project without custom code to isolate the issue.
  • Ensure proper z-index and positioning so the menu appears above other content.
  • Verify that the navbar is not hidden by media queries and its interactions function correctly across breakpoints.

If your menu appears correctly in Webflow Preview but disappears on the live published site, the issue is likely tied to conflicting custom code, publishing errors, or visibility issues affecting only the live environment.

1. Republish and Clear Cache

  • Republish the site from the Webflow Designer using the Publish button (make sure to select both the staging and main domains).
  • After publishing, clear your browser cache or try opening the site in an incognito/private window to avoid seeing a cached version.

2. Check Display Settings and Visibility

  • Open your menu component in the Designer.
  • Verify that the menu wrapper, container, and nav elements are set to "Display: Block" or "Flex", and are not marked as Display: None at default or desktop breakpoint.
  • Examine if there are any hidden states set in interactions that don’t run on page load, especially on published sites.

3. Inspect Navbar Symbol and Page Structure

  • If the menu is a Symbol, make sure it's added to every page manually—it won't show automatically unless it's placed per page or embedded via component slots.
  • Ensure it's not placed inside a conditional visibility wrapper, or dependent on CMS conditions or user login states that don't work outside the Designer.

4. Use Browser Developer Tools

  • Open your site in a live environment, right-click and choose Inspect Element, then:
  • Search for the menu/nav element in the DOM
  • Check if it’s present but styled with visibility: hidden, display: none, or opacity: 0
  • Note any console errors in the browser's DevTools that could point to script or asset issues

5. Check for Conflicts with Custom Code

Even though you removed some code, use caution with:

  • jQuery or third-party libraries—ensure they are loaded only once and not overriding base Webflow behavior
  • Any custom script altering styles or visibility—these might behave differently in Preview vs Live
  • Ensure closing tags are properly placed so layout isn't broken

6. Test with a Clean Environment

  • Duplicate the project and remove all custom code and CMS bindings
  • Add just the menu component and publish—this helps isolate whether the issue is within the menu itself or an external conflict

7. Check the Z-Index and Positioning

  • Confirm the menu or nav bar is on top of all sections:
  • Use a z-index higher than other elements
  • Set position: fixed or relative appropriately so it isn’t overlapped by content below

8. Verify Navbar Component Visibility Trigger

  • If you're using Webflow’s native Navbar component:
  • Make sure the menu button isn't hidden by media queries or interactions tied only to certain breakpoints
  • Check that the open/close menu interactions aren’t overridden by custom logic

Summary

The issue most likely stems from display settings, a missing component on live pages, or an interaction/visibility style not triggered correctly in the published site. Use browser DevTools to inspect live behavior and rule out custom code conflicts or incorrect structure placements. Testing in a clean version of the site can help isolate the problem.

Rate this answer

Other Webflow Questions