Your desktop/tablet navigation menu is disappearing in preview mode likely due to visibility settings or interactions tied to the nav-trigger (the burger menu). Here's how to identify the issue and retain both elements.
1. Check Element Visibility Settings
- Select your nav menu in the Navigator panel.
- In the Element Settings panel, verify that the Display setting (e.g., Flex, Block) is not set to None for the desktop or tablet breakpoints.
- Ensure you're editing on the correct breakpoint (e.g., not on mobile if you're troubleshooting tablet/desktop).
- Webflow sometimes hides nav menus by default in preview for lower breakpoints, so check whether it's set to be hidden improperly on larger viewports too.
2. Review Interactions Applied to the Nav Trigger
- Go to the Interactions panel and check if the nav-trigger is linked to any click interaction.
- If the interaction hides the nav menu when the trigger is inactive, it could be affecting visibility even in desktop sizes.
- Make sure the interaction is scoped to only apply to mobile breakpoints if needed.
3. Inspect Navbar Component Settings
- If you’re using Webflow’s Navbar component, it includes automatic behavior:
- The nav menu defaults to hidden and only becomes visible when the trigger is clicked on smaller breakpoints.
- However, on desktop/tablet, it should be visible by default.
- If you deleted the nav-trigger and the menu appears, this suggests the system may still think it’s on a mobile breakpoint or that the menu is falsely set to hidden.
4. Avoid Manual Overrides that Break Default Behavior
- Avoid manually setting the Display: None or making changes to position/display styles that conflict with Webflow’s responsive logic tied to the navbar.
- Confirm that styles aren’t cascading from mobile to upper breakpoints. Sometimes users mistakenly change display settings while on the wrong breakpoint.
5. Use Custom Navbar Instead (Optional Solution)
If the built-in Navbar component is causing limitations, consider rebuilding the navigation manually:
- Build a nav container using Div Blocks, Links, and a custom menu toggle.
- Set visibility via interactions, giving you full control across breakpoints without relying on Webflow’s Navbar behavior.
Summary
Your nav menu is likely hidden due to interactions or display settings tied to the nav-trigger. Check visibility settings on tablet/desktop breakpoints, confirm interactions are scoped properly, and consider using a custom navbar if needed.