Why does my desktop / tablet nav menu disappear in Webflow's preview mode, even though it appears when I delete the "nav-trigger" (the mobile burger menu)? How can I keep both the nav-trigger and the nav menu in preview mode?

Your desktop/tablet nav menu disappears in preview mode likely because the navigation element is set to be conditionally hidden based on screen size and Webflow's built-in mobile navigation functionality. When the nav-trigger (burger icon) is present, it's likely overriding the visibility styles of the full menu.

​

1. Understand Webflow’s Native Navbar Behavior

​

• Webflow’s default Navbar component includes breakpoint-based behavior:
• On tablet and below, the full nav menu is automatically hidden, and a burger (nav-trigger) appears.
• The menu is only shown when the nav-trigger is clicked.
• On desktop, the full nav menu remains visible and the nav-trigger is hidden.

​

If this behavior is overridden or custom classes interfere, it can cause display issues.

​

2. Check Visibility Settings for Each Breakpoint

​

• Select the nav menu element (class name is often Nav Menu).
• Use the Device breakpoint selector at the top of the Webflow Designer to preview in:
• Desktop
• Tablet
• Mobile Landscape
• Mobile Portrait
• At each breakpoint, ensure:
• The menu visibility is set to Display: Flex or Block, not Display: None (except for breakpoints where it should be hidden).
• The nav-trigger (burger menu) only appears on tablet and smaller, and is hidden on desktop.

​

3. Inspect Interactions or Custom Styles

​

• Check if you’ve added interactions or animations that hide the full nav on page load or during animation sequences.
• Look in the Interactions panel for any Nav Menu-related triggers.
• Also inspect the Style panel for custom breakpoints or conditional display: none settings that are accidentally targeting the nav menu.

​

4. Rebuild or Reconfigure the Navbar If Needed

​

• If the issue persists due to customization, consider:
• Re-adding the Webflow default Navbar component and customizing from there.
• Ensuring the nav-trigger’s action toggles the menu (Webflow uses Menu Button element connected to the Nav Menu div).

​

5. Force Visibility for Debugging (Optional Temporary Step)

​

• You can temporarily add a custom style, like setting the menu (Nav Menu) to Display: Flex for all breakpoints, to visually debug in Preview mode.
• However, don’t forget to reset this afterward to avoid breaking responsiveness.

​

Summary

​

Your nav menu likely disappears in preview mode due to Webflow’s default responsive behavior tied to the nav-trigger. Make sure the display settings are correct on each breakpoint, and that no styles or interactions are hiding the menu unintentionally. Keep both elements by ensuring the nav-trigger only shows on mobile/tablet and the nav menu displays properly on desktop.