Webflow sync, pageviews & more.
NEW
Answers

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?

If your desktop/tablet nav menu disappears in Webflow's preview mode when the "nav-trigger" (mobile burger menu) is present, it is likely due to a conflicting interaction or CSS issue. Here are a few possible reasons and solutions to help you keep both the nav-trigger and the nav menu visible in preview mode:

1. Interaction conflict: Check if there are any interactions applied to the nav menu or the nav-trigger that might be conflicting with each other. When interactions conflict, it can lead to unexpected behavior like one element overlapping or hiding another. Review the interactions panel and ensure there are no conflicting triggers or animations assigned to both the nav menu and nav-trigger at the same viewport size.

2. CSS visibility property: You may have unintentionally set the visibility property of the nav menu to "hidden" or "none" when designing for mobile. To fix this, select the nav menu element, go to the Styles panel, and ensure the visibility property is set to "visible." Also, verify that the display property is set correctly for each breakpoint.

3. Z-index stacking order: Another possible reason for the nav menu disappearing is incorrect z-index stacking order. If the nav-trigger has a higher z-index value, it may overlap and hide the nav menu. To address this, select the nav menu, go to the Styles panel, and try increasing its z-index value to ensure it appears above the nav-trigger.

4. Overflow or position property: Check if the parent or container element of the nav menu has an overflow property set to "hidden" or a position property set to "relative" or "absolute." These properties can affect the visibility and positioning of child elements. Adjust the overflow and position properties of the relevant elements to ensure the nav menu stays visible.

5. Conditional visibility settings: In Webflow, you can set conditional visibility for elements based on different criteria like device size, page scrolling, or user interactions. Double-check if there are any conditional visibility settings applied to the nav menu that might be causing it to disappear in certain situations.

If you have tried these steps and the issue persists, please provide more specific details about your Webflow project, including the structure and settings of the nav menu and nav-trigger elements. Additionally, consider reaching out to Webflow's support team or community forums for further assistance as they can provide more tailored guidance based on your specific case.

Rate this answer

Other Webflow Questions