Streaming live at 10am (PST)

Nav bar design with hamburger menu

Hi,
I am making a Navbar which wants to have a hamburger menu on the right side. In order to have more link inside of it. Like the Peloton HP.


I try to show the hamburger menu on desktop mode. But first of all, when I open it, it just jumps to template mode, and I can’t edit it.

And when I open the hamburger menu, the links on Navbar just disappear.

Can anyone kindly help and teach me how to make the Navbar menu I want?

Best regards,


Here is my site Read-Only: LINK
https://preview.webflow.com/preview/bodyboss-28a4c076777f84bdc52d45bca2a4d5?utm_medium=preview_link&utm_source=designer&utm_content=bodyboss-28a4c076777f84bdc52d45bca2a4d5&preview=20f9ace36e0e3874e2a212e5def145fe&mode=preview

Clean up the styles (Something makes a bug) - one by one until you find the “problem” (5-10 minutes).

The best idea her is to start from zero with less styles + Compare to webflow original markup (You add to much classes, empty divs, and so on for very simple layout).

Also you should use two navbars (In your case you try to nest two navs - and u get very broken layout = hard to debug).

The widget works fine when you show hamburger and show/hide the menu (In your case you put visible menu + hamburger to show/hide another div).

Hi,

Thanks for your reply.
After I tried to clean up the menu, I made what I want. :slight_smile:

I have one more questions, do you know how to center the link outside the hamburger menu?
Like this


Now it goes to the left.
https://preview.webflow.com/preview/bodyboss-28a4c076777f84bdc52d45bca2a4d5?utm_medium=preview_link&utm_source=designer&utm_content=bodyboss-28a4c076777f84bdc52d45bca2a4d5&preview=20f9ace36e0e3874e2a212e5def145fe&mode=preview

One way - by flexbox (On tablet/mobile you could change this to block).

Desktop:

Change navbar display to flex

logo - Add margin-right auto (Push the logo to the left)

menu button Add margin-left auto (Push the item to the right)

Result:

Thank you!!!

I tried the “flexbox” before, but didn’t try to add “auto”!!
It looks great now. Thank you again!

I also made a submenu “feature submenu” in my product page, which is also align to center.
43

How do you think about the setting?
I am still working on the code, the ideal menu is like the following link. :slight_smile:

Please kindly advice.

Beat regrads,