I’m wondering the best way to go about creating a navigation similar to the one depicted in this design file:
Multiple navigations? Is this possible? And also, how to have it work with mobile as well.
Here is my public share link: https://preview.webflow.com/preview/squlion-s-dapper-site?preview=4b771f9fc080d9d2f304f787e8a5ad6f
Hum, are your familiar with Flexbox ?
I probably would have done with it, then using the flexbox ordering for responsive
I’ve watched a few tutorials on it, so familiar, yes, but not proficient yet 
How would one set it all up? In the end, this is going to a very complex navigation, at least on the desktop. Functionality would obviously degrade on mobile. But there will be dropdowns for the three menu items on the left. The search icon needs to slide out in a search field. And the last three links, two will trigger modals, and the cart will load a new page.
Are there particular combinations or tutorials or anything you can recommend in Flexbox or Webflow to watch to help me with this? I’m just trying to wrap my brain around how to build it in Webflow.
Hi @szimmerman
Can you please demo in Photoshop what you want to achieve on mobile so i can see clearly and demo this
Here are samples of what we’re wanting to achieve as the navigation shifts from desktop view. The final mobile “nav modal” in blue is still a WIP as not everything on that menu is set in stone, but that is how the functionality would appear.
Ok then i think the best way to do this is not using the Webflow navbar element 
Let’s rebuild your desktop navbar with a simple div.
First drag a new div navbar desktop, set to absolute top, 100px height, white background
Put a two column inside, give to your row a class and 100% height, and add both column classes (also 100% height)
Drag in your first column a link block for your logo. Give it a class, 100% height a fix width (150px?), a background image of your logo and float left. You can add some margin, like 40px.
Now put another link block, height 100%, float left and style it.
Duplicate 2 times when it’s done and change your names.
Go to column 2 and do the same thing for the other menu, float right this time.
Ok your Navbar for desktop is created. Now we want to create a mobile navbar hidden on desktop and display for tablet and below.
We also want your desktop navbar to be hidden for tablet and display only on desktop.
So let’s do this.
Switch to tablet, and hide navbar desktop
Drag a new div called mobile navbar, switch to desktop, hide it, switch back to tablet and click display.
Now you can create your navbar for mobile in this new div, and create a simple interaction on click to open the menu.
If you also need help for this, maybe create a new topic more specific like “custom mobile menu” and @zbrah me on this one.
I ll demo this on something more general for everybody.
Finally have a chance to sit and go through this today, thank you for the help! 
I will definitely start a new topic if I get stuck 
I appreciate it SOOO much!
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
