Main NavBar is hidden. Requiring me to press Hamburger on Desktop

Hello everyone,

My Main Navbar is built off of this template below, and it’s supposed to be able to view with sub nav links immediately when you land on the page, like the template has.

However, I’ve been trying for almost a whole day to figure out why on every page for desktop view, it is requiring me to press the hamburger to show the nav menu?

I’ve been going between the desktop and mobile device views and I can’t seem to figure out how to get rid of what is collapsing the menu? Especially in desktop view?

It should look like this screenshot I took about a day ago.

Somehow, between now and then the main nav menu moved down and is not positioned up near the top, like the template?

Now it’s further down and also requiring me to press the hamburger that you see in the top right. :frowning:

Any and every help/assistance would be greatly appreciated!!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

You have it configured so that the hamburger menu shows at desktop breakpoint and below-
Change that to tablet or mobile landscape depending on where you want the breakpoint to be.

Thank you so much that makes a lot of sense!

So, I’ve followed your very easy to follow steps, for the mobile devices.

However, on the Home page instance for the navbar in Desktop is not showing?
Do I have to make the menu icon visible or hidden for Desktop? - I thought I would change it to hidden?

Also, am I doing something wrong with the placement? I have it on flex display and relative positioning?

Will that allow me to achieve the results I had with the Navbar appearing on the top to the right of company logo?

https://preview.webflow.com/preview/acrx-pharmacy?utm_medium=preview_link&utm_source=designer&utm_content=acrx-pharmacy&preview=de829648fe5af5ed418bd8931fb40d20&workflow=preview

I really don’t know what you’re trying to do.
But here are some tips-

  • Do not hide the menu button. Webflow handles that automatically at the breakpoint you choose, using the setting I showed you above.
  • That configuration is a setting, not a style, so it’s not breakpoint specific. You set it once and it affects the Nav at all breakpoints.
  • Be careful about playing with Flex, etc. in a Nav element. It already has a lot of layout work going on including floats, which will conflict and blow up in your published site. Keep it simple.
  • If you want your logo in the nav, you can put it in the nav, or you can place it next to the nav and wrap them both in a flex DIV so that they appear side by side.

Good luck!

Ahh, I see!! I understand now, thank you so much!!

I didn’t know Webflow automatically saved separate settings for each breakpoint.

So I was basically changing and undoing settings each time, thinking that “publish” would save the settings for everything, instead of just clicking out and applying what I wanted on the next instance or breakpoint.

In anyway, I updated the site and the nav bar works.

You are indeed a hero!

1 Like

Awesome work.
But just to make sure I was clear, it’s the other way around actually;

Styles are breakpoint-specific. They’re applied progressively, starting from the main breakpoint ( indicated with the * ), and then overridden by subsequent breakpoints and you move away from that center in the top center breakpoint nav. Tablet overrides Desktop. Mobile Landscape overrides Tablet, etc.

Settings are not breakpoint-specific, they affect an element the same way across all breakpoints.

Crucial things that aren’t immediately obvious when you start pushing pixels in Webflow :wink: