Streaming live at 10am (PST)

Nav bar toggle not possible?


#1

Quick question: I'm using the nav bar you made as a widget and now I'm wondering if there's any way to make it disappear on second klick? Now it disapperars when klicking outside of it, but I'd like it to disappear on second klick on the hamburger.

I could make my own, but would be nice to know if there is a way to do it without making my own smile


#2

Hi, I was checking one of my sites, and for me at least, the navbar widget shows and hides on click on the hamburger icon... Do you have a web preview link of your site that you can share? You get that link from the settings of your site on the main settings page... enable the external link setting and copy that link to the forum. Cheers


#3

Hi! I see it works that way when I first put in the navbar but it just stops working somewhere when I edit the button by adding some text beside the hamburger icon.. Might be because I add another class to the hamburger?

Would be very thankful for some help. Check it out here:
https://webflow.com/design/lissly?preview=780e3e1541744af104cb0b5d7ea3ace4


#4

Hi again, can someone pleeeease help me with this? As I said I could redo it but I'm a bit of a stubborn person and would love to understand what's wrong to be fully happy with making it work(even if I end up redoing it). Thank you...


#5

Hi Stina, thanks again for the link. I am looking through your site, to see if I can find out the reason why the second click to close menu is giving you some issue. I get back to you as soon as possible. Cheers


#6

I've had the same issue with every navbar I created. I resorted to creating a close button with the help of bartekustra


#7

Hi @cyberdave! Thank you! I'd be so happy to get why this happens. And @DFink Hum, sorry to hear. I feel like I might give way to that very soon...


#8

Hi @Stina and hi @DFink, ok, I figured out what the issue is. It is not so readily apparent, so I will explain. I will use @Stina website, since that was the one I was checking, but @DFink, if you need me to look at your site also, I can do that, if the answer below does not help you too.

The first thing you need to do, is to get into the editing mode of the LeftNav menu, which is stored as a symbol in your site. You can access the editing mode of the symbol by double clicking the symbol.

Next, select the element MenuButtonBlock (which is the click region for the navbar). Click on the settings icon so you can view the menu settings:

Next click "Open Menu"

Now that the menu is Open, we want to update the style setting of the MenuButtonBlock, so while the menu is OPEN from the step you just performed, click on the style icon. The current setting for the MenuButtonBlock when it is in the Open state is position-relative, top-left corner and z-index is set to Auto. You need to change the setting for z-index to some number value greater than the the z-index for the left nav panel that slides out... otherwise, the click region on the menu hamburger is not accessible for the second click.

In my test, I just changed the z-index to the open state of the MenuButtonBlock to 999 and then saved change and the menu will work, both open and close.. try that out... here is my screen shot of the MenuButtonBlock style settings:

Let me know if that works for you... I hope that helps and happy webflowing !


#9

HURRAY! It works! THANK YOU! What you said: "I have narrowed down the issue, to the way the left nav container is sliding over the controllable region for the menu, which means, the left nav is sliding out and covering the click area, thus you are not able to close the menu on click." really expains it all to me! Thank you!


#10

Fantastic @Stina, glad to be of assistance, if you need any further help, just feel free to share on the forum, lots of great people here who like to help out smile


#11

Okay this makes total sense for a regular nav bar. I have a sticky nav bar that uses the z index to put it always on top. Can I just make the button a value higher than the navbar? Here is my public link. Thanks!
https://webflow.com/design/roclifecoaching?preview=a8b2cb953e1b72034816b7a716cd4d84


#12

Exactly correct smile Just give that hamburger icon "position relative" and higher z-index value than the navbar.


#13