Streaming live at 10am (PST)

Split hamburger menu help


#1

Here is the share link
https://preview.webflow.com/preview/jane-avery-test-site?preview=00187bee6d03cb933377e7b913530e8e

I can't figure out what I am doing wrong with the hamburger menu. I realized that because I split the navbar in two or had two I wasn't going to be able to have all the links show up in one. I tried placing the menu's one over the other but that really wasn't a solution. So I removed visibility of the second navbar and added the links to the other navbar but why is the menu button showing up and the header in my hamburger menu? Time to sleep on it. But if you have any solutions please let me know.

Not sure if I'm trying to do unecessary workarounds because I don't have a great grasp of the hamburger menu's to begin with. They have always been problematic to style for me.

thanks
Jer


Here is my public share link: LINK
(how to access public share link)


#2

Am a little lost...
Why do you have 2 navbars ?


#3

only way to achieve a split navbar with logo centered. Unless there is a better way but this was what nelson did in his tutorial. But it seems to break the design.


#4

oic. That makes sense.

How about this:

Imagine 2 NavBars... Left and Right.

NavLeft has Option 1, Option 2, Option 3

NavRight has Option 1, Option 2, Option 3, Option 4, Option 5, and Option 6.

On Desktops... NavRight - Options 1, 2, and 3 are hidden.

On a Tablets and below... NavLeft is hidden... and NavRight Options 1, 2, and 3 are now visible.


#5

Here's an example:

http://centered-logo-with-2-navbars.webflow.io/

https://preview.webflow.com/preview/centered-logo-with-2-navbars?preview=37589c2fda3935e87354aa88c153efb2


#6

Ok I did try something similar but maybe I put them in the wrong navbar side so it messed it up. Will try again over the weekend. Thanks rev


#7

@Revolution part way there I did the reverse with the menus and added them to the left menu and hid them. But why am I getting the logo and the menu button still showing up any ideas? Thank you for the fix though spent 3 hours last night trying to figure it out

Jer


#8

The logo stays in the center for me.

Except in tablet and phone... which you want moved to the left.

The hamburger only appears on tablet / phone on the right.

Can you show a screen shot of what you see ?

In my example... I"m not using Flex. It's 3 div. One for each menu and 1 for the logo.


#9

This template shows how to set this up in a good way. https://webflow.com/templates/html/mill-agency-website-template


#10

@Revolution

I don't want the Header to show up, ideally i don't want them to take any space. I have created other nav menus and the headers are never in there or the menu button. Maybe I should just redo the navbar from scratch because it was probably in the million and one settings I played with that makes it like this

@DFink yep that is exactly what I'm going for but the preview doesn't show me the webflow work view so i can't see the settings. It's getting there I just don't want my header or menu button to show up in the hamburger menu


#11

You can open it in webflow and see the site structure. Just hover the open button and click the open in webflow button.

You also have the option of simply building your navbar using text links and then using the navbar component for mobile only and hide it on desktop.


#12

That might be the solution. I thought in my other site The Header and menu button weren't visible in the drop down menu. I'm definitely in the ballpark. So I could create a desktop navbar. And then another one with webflow navbar function visible on table and below with no header in it at all.

Thanks @DFink


#13

Yes exactly, you'd just grab a section and style it to be your navbar background with whatever look you want. then drag in your text links and your logo and make sure it is set to center. Then create a separate navbar component and make it invisible on desktop via the settings panel and make the desktop version invisible on tablet and below.

The only thing you need to remember is that you links are not connected so you'll have to update them on both desktop and mobile. Hope that helps and I'm here if you need any more guidance.


#14

Different people have different ways of doing it.

Personally... I'd remove the H1 Jane Avery from the NavBar
and make it a Text Initials (JA).

Move the H1 down into the Top Graphic section.
Fix the NavBar to the Top.

Use 3 DIVs for the Nav.
Left DIV holds the Left Desktop Nav.
Right DIV holds the Entire Nav.
Center DIV is for the Initials

Here's an updated version.

Everything works except a small positioning glitch with the NavMenu on Mobile.

The code is there. Just fiddle with it and make it yours.

http://centered-logo-with-2-navbars.webflow.io/

https://preview.webflow.com/preview/centered-logo-with-2-navbars?preview=37589c2fda3935e87354aa88c153efb2


#15

Thank you @Revolution and @dflink I had to redo the navbar because I had messed around with it so many times. I guess if I want to eliminate or change the header text on the dropdown menu I could use an interaction to make it appear and disappear. I agree Rev on the drop down the the initials look better but for the overall look of the site plus for performers it is all about name recognition. I need the full Name at the top. I appreciate the assist and yes it was way easier than I was making it. I created mobile sections for my own site but it didn't dawn on me to do the same with the Navbar. And yes I have to set the links to both.

thanks
Jer


#16

Just further figured it out. Simple fix too. I wanted the drop down to start from the top and cover the header. I just had to position it fixed and to the top. Now it covers the header on drop down. Well I learned a lot about hamburger menus and drop downs. I should be able to create these in my sleep


#17

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