Community forum for knowledge and support

Updated 2 weeks ago

Building a Custom Mega Menu with Two Navbar Components

Hey everyone! I am trying to build a custom mega menu using two navbar components and I am having trouble. When I click on the hamburger icon, it doesn't display the mega menu under its 'open' state. Can anyone help me figure this out? https://preview.webflow.com/preview/new-ah-art-site-141f30?utm_medium=preview_link&utm[…]59295a56e6&pageId=68102d284b673485a55c5ed0&workflow=preview

C
M
A
9 comments

Why would you want two navbar components? Just curious? I tried to take a look at your code to help untangle this but it appears you have three nav bars in there and it was quite a bit of a mess...

yeah mega menus are just large drop downs. I would avoid using multiple navbars whenever possible.

I didn't explain it properly.. I'm sorry. I am building 1 navbar, but taking certain components from each navbar (4 & 7). I like the dropdown from 7. I like the button/hamburger menu from 4 (as the button will be a shop cart button eventually). I tried multiple times to build this component by looking at both nav components and using the same class/styles and still having issues. The dropdown menu displays on the closed/open state. I deleted the other components to make it less confusing. I hope this makes sense and any help on figuring out why the menu displays outside the navbar would be greatly appreciated.

Got it - lets take a look

@Andrew Hatfield yeah I really don't know to be honest and a lot of the navbar functionality is out of our control to be honest - hidden by webflow's code.

It would be better to grab the navbar with the mega menu that you want, and then adjust the layout of the rest of the navbar to match the navbar you liked. I dont have any further context of what pieces you liked from each but thats the approach I would take - start with the most complicated navbar first, then make minor adjustments to match the smaller pieces.

@Matt thank you for taking a look. I’ll use the navbar 7 component and make the minor adjustments like you said.

ah I think the reason that its displaying outside of the navbar and isn't opening correctly is because the original CSS that controlled all that was set at tablet down but you've moved it to desktop which means you'd have to recreate all of those styles for desktop down. Again if you want a hamburger menu for desktop, best to start with a navbar component that already has that. Navbar 16-22 all have hamburger menus at desktop.

Oh ok. Thank you, I’ll take a look at those components and go from there. I appreciate the feedback and insight!

no worries - let me know if you run into any more issues

Add a reply
Sign up and join the conversation on Slack