Navbar Hamburger doesn't appear

Hello all,

New to webflow and finding the learning curve incredibly steep.

I made a component navbar to use across my site but on any breakpoint smaller than desktop the hamburger doesn’t appear and my menu disappears.

Can anyone tell me what I’m doing wrong?

Here is my site Read-Only: [LINK](Webflow - Fantabulous Site)
(how to share your site Read-Only link)


You don’t actually have a hamburger element in your design (so there’s no chance of one showing), and your current menu items are set to be hidden on anything below desktop size in the Settings toolbar.

There is a standard navbar element available under the Add Elements toolbar on the left- you might be better using that and tweaking it :slight_smile:

Thanks for answering Phil :slight_smile:

I did use the nav from add elements and tweaked it but once I added interactions (underline under menu items on hover) the hamburger disappears.

Where are the menu items set to be hidden on lower breakpoints? I thought i that was the eye icon under layout but mine are set to display on all breakpoints.

Screenshot 2023-08-14 at 13.58.24

It can, and is usually done there (that’s where I control things)…but sometimes it’s also done through the settings panel (second tab on the right hand side), and that throws me too.

If you’ve used the standard elements, I think you might have accidentally deleted some things…easily done though! So I’d start again…don’t worry, you’ll get there :slight_smile:

Thanks Phil,

I started over. Now I do get the hamburger menu but it doesn’t open out in the original navbar even though it does in navbar 2 (which I did just for comparison). Aside from having styled the nav links in nav1 I don’t see a difference between the two that explains who nav1 hamburger doesn’t open.

Do you see why this is? I set it to dropdown and show in the setting menu.

Did you try simply deleting Navbar2? It works when you do that (it might be getting confused with class names)

That did work thanks Phil. I also started over (again!) and have a new problem.

The underline on hover animation is working as I want in desktop view. However, that underline
then also shows up in the hamburger dropdown, which I don’t want.

Is there a way to style the navlinks that are in the dropdown differently to how the navlinks in the desktop navbar are styled?

yup - very simple…
Change your breakpoint view to tablet, and then set your New_Underline div to hidden (those icons you screenshotted earlier). Because you choose the tablet breakpoint view to do this, it won’t affect the desktop version, but will feed down to the smaller sizes automatically.

It worked! Thank you so much :smiley: I really appreciate your help