Navigation breakpoint presets workaround?

Hey all, I’m having a navigation/breakpoint issue. What I’m looking for is a way of displaying the menu icon (stacked/hamburger) on every screen size from desktop downwards (so desktop, tablet, mobile horizontal and mobile portrait), but then having the full/expanded menu bar (horizontally arranged text buttons) appear only on a screen size of 1280 and above (i.e. above desktop, although excluding desktop itself). Is this possible? The presets don’t seem to allow this level of nav customisation for larger breakpoints - menu icon seems to be only either tablet and lower or literally every screen size, so I wondered if there was a workaround.

Any pointers?

Cheers,
Thomas

Here is my site Read-Only:
https://preview.webflow.com/preview/thomasrailton?utm_medium=preview_link&utm_source=dashboard&utm_content=thomasrailton&preview=553c363470c8d33ffb8107aafedc0cae&workflow=preview

:thinking: Unfortunately I think you’d have to hack it to get that configuration.

nav-wrapper
  nav-full
    ..A copy of your nav configured for full-size display
  nav-collapsed
    ..A copy of your nav configured for hamburger mode at all breakpoints

The rest is just using display: none at breakpoints to show the right version of the nav.

It’s annoying to have two navs, but you can mitigate that problem by wrapping the navbar internals in a DIV and making that a component. That way you only have one place to manage your menu items, but you can still configure each of the navbars differently for hamburger settings ( just click the Navbar element, and go to settings ).

You can’t do that with the Webflow navbar presets. You have to build a custom navbar for this behavior. But, it’s not that hard. You don’t need any custom code to do this. Just don’t use presets and make a layout in your desktop breakpoint(hamburger menu layout, it will take all the breakpoints desktop downwards so desktop, tablet, mobile horizontal, and mobile portrait). Then, go to the 1280 breakpoint and change the layout by hiding the hamburger menu and revealing the full/expanded menu bar (horizontally arranged text buttons). It will solve your problem. I think you understood. Feel free to ask if you have any confusion.

Thanks for the assistance @memetican and @unifiedui - I appreciate the input, but I’ve just tried to implement your suggestions and although it was kind of working (if a little rough around the edges), the further I get with it, the more issues arise - for example, the 3D head (that follows the mouse cursor) makes sense when there’s a mouse to follow, but not so much when the site is viewed on a tablet or mobile, and now that the previous breakpoints have to essentially be reassigned the whole idea quickly falls apart and can’t be rectified because of the breakpoint limitations on interactions.

It seems I’m left with no choice but to revert back to how it was before, and for anyone that insists upon viewing the website on tablet landscape, well, they can go take a long walk off a short pier.

Yep if you’re also using page interactions that’s a bit trickier to do breakpoint-specific suppression at larger breakpoints.