2 Navbars in Same Section

Hi All,

I’ve searched the forum high and low for a resolution, but found nothing. Apologies if this has been answered (though I will be secretly happy!).

I would like to have two navbars on the same page, and on the same “plane”. The “navbar” on the left is essentially a language drop-down menu. The navbar on the right is the actual website navbar.

Language “Navbar” on left

Website Navbar on right

For the language menu, the reason I want to use a navbar and not a dropdown is that I want the language menu dropdown and links to replicate the navbar’s (i.e. dropdown links cover entire page width, same menu easing, etc.).

The problem is that since navbars use 100% width, both the language menu and navbar are on top of each other. Reducing the width of one so that the other can be clicked doesn’t work, as then the dropdown links don’t cover the entire width of the page.

Have I confused anyone?! I’ve tried a million different things, no success yet. I’d love some help from a smarter/better webflow designer :grinning:

Thank you!
Brent

Hey Brent,

You can easily achieve this with Flexbox, here’s a quick video tutorial by @PixelGeek - Webflow Workshop #37: Designing flexbox layouts in Webflow - YouTube

Hope it helps.

Naweed

Hi Naweed,

Thanks so much for your help! That is exactly what I was looking for. I followed Nelson’s workflow and I have the two hamburger menus setup perfectly. Both are clickable now.

There’s only one problem: For some reason the 2 menu buttons and dropdown links can not be separated. If I edit the links in the language menu, it automatically changes the links in the nav menu (and vice-versa). If I hover or click on the nav button, the hover color changes on the language button (and vice-versa).

I can’t figure out how to disassociate the two nav buttons so that they are on their own and can be edited separately. Changing classes had no effect.

Does anyone have any workarounds?

Thanks again,
Brent

Hey @tws,

You’re very welcome.

The only best workaround is to drop in a new navbar in desktop view, hide it on all devices except for mobile view and add all the nav links from the current 2 navbars. Make sure to hide the 2 navbars in mobile view.

Hope this helps.

Naweed

Hi Naweed,

I’m sorry but I don’t understand. Are you saying that mobile will only have one navbar with all the menu links and language links? If so, I still have the issue of the 2 navbars (menu link nav and language nav) not working on all the other devices.

Thanks,
Brent

Hey Brent,

You could display the 2 navbars in desktop view only and 1 navbar (containing menu and language links) in all other views.

Best,
Naweed

Hi Naweed,

Thanks again for all of your help!

Actually, the problem isn’t mobile devices. I can’t get both navbars to work on any device, including desktop.

The problem is that if I edit the menu links on one navbar, Webflow automatically edits the same links on the other navbar. What I think is happening is that if you have two Nav Menus and Menu Buttons in the same div, Webflow only uses one of the menu drop-downs for both buttons. For some reason, Webflow can’t associate each drop-down menu with its correct button…it just uses one menu for both buttons. If there are two menu buttons, or three or ten menu buttons, Webflow seems to think they all open the same menu.

In Nelson’s @PixelGeek video, he never went so far as to test the links in mobile (to see the hamburger button). I’m not sure if there are additional necessary steps. Nelson, if you’re reading this, would you please provide some of your awesome insight? :grin:

Thank you!
Brent

Hi @tws, the navbar widget is designed to have only 1 nav menu with links and one menu button per widget. Having multiple menu buttons in a navbar as shown in your example can cause unpredictable behavior.

When using multiple navbars the links should work fine. If you still need help with the design, could you please share the read-only link? Share a read-only link | Webflow University

My suggestion is probably to create a nav menu using interactions if you want to have some custom behaviors that are not already built into the navbar widget.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.