Hi, new user here! I’ve been working on the tutorial for creating custom mobile menus
This raised a question. In the tutorial the mobile menu is created as a separate element to the standard Webflow Navbar - which is set to be hidden on mobile screens. This replaced with a custom hamburger and full screen menu when mobile.
I wondered if this is okay to do as I thought normally, when creating a responsive nav with JS CSS and HTML, the nav is the same element just restyled. Is it okay to have 2 separate nav menus, one for mobile and one for desktop or should there only be one main nav? If there should only be one how can we go about this in Webflow?
I’ve tried, with interactions, to have the mobile menu slide in on clicking a custom hamburger, but this seems to rely on an initial state of size 0% which would then affect the desktop nav? Are there any tutorials or cloneable custom Navs to work from?
I don’t have a site to look at currently as this is more of a general “is this the right method” question.
I hope that makes sense! Thanks in advance for any help.
To answer your question briefly, yes you can have two different menus, whether they are both custom or one is custom on mobile and the built-in one on desktop.
Just make sure you change your class names from desktop to mobile as if you change anything on desktop it will trickle down to mobile. You could also add a combo class to your mobile nav that would only affect those specific changes.
This site was built around the notion of a desktop menu, but as I moved into mobile I created a custom mobile nav that popups from the bottom by way of interactions.