Streaming live at 10am (PST)

Having Awkward Hamburger Menu Trouble


#1

Hi webflow,

Having trouble with my hamburger menu. Could someone kindly take a look and let me know why there are bugs with it?

When you open let's chat or request a free consultation. You can still click behind the form and open the hamburger menu.

It also turns to an X when the menu is already closed.

Been trying to work it out but to no avail.

Cheers!


Here is my public share link: https://preview.webflow.com/preview/cultureddesign?preview=6f288ca2e7e7e725138014a9341d4084
(how to access public share link)


#2

EZPZ

Change the z-index value on your Modal Background element to 9999.

EDIT: Scratch that. Change the z-index value on your Modal Background element to 9999 and drag it to the top of the navigator.

RE-EDIT: I was right the first time. Not sure why it stopped working for a minute. You should be fine by only adjusting the z-index value.


#3

@Cricitem thanks! You're wicked. That solved the issue with clicking behind the form.

I'm still having troubles with the hamburger interaction. It is bugging out and shows an X even when the menu is closed if you click on one of the navigation links.


#4

Just put an interaction on each nav link that animates your nav burger to the correct state. I believe right now you only have that set to if a person actually clicks on the nav burger itself.

EDIT: Actually, I didn't realize you had that animation tied to click events on the hamburger icon itself. Just tie the animation to the navigation dropdown open and close and you should be good to go.


#5

@Cricitem

Thanks for your reply! How would I go about tie-ing the animation to the navigation open and close?

I'm bait missing something. Cheers for you help.


#6

You're very welcome.

Where you select the trigger for the interaction, instead of "Click" choose "Dropdown". That will give you a window with two triggers, open and close. Do the same animations you did for first and second click in there, and remove the click animations. That should take care of it.


A toggle trigger or 'reset' first click to fix first/second click trigger problems
#7

@Cricitem

Sorry, I'm struggling to get it to work.
Which ones do I set for open and which for close?


#8

You are going to replace each with a Dropdown trigger. If you go into each of those Click events, you'll see a "First Click" and "Second Click" trigger. You just translate each of those into a "Open" and "Close" Dropdown trigger (respectively).

Did you clone this from somewhere? I'm kind of surprised it wasn't done as a Dropdown trigger in the first place.


#9

@Cricitem

I've tried what you suggested but it doesn't seem to be working. :frowning:

Yeah I copied it from a forum post which was done as a click interaction.


#10

I have no clue why it isn't working. It previews just fine but then simply doesn't function in use.

Hopefully someone who knows webflow better than I do will show up and help out. I'd sure like to know why it isn't working. It looks perfect to me.


#11

It has something to do with that element. I put another dropdown list on that same page and applied a dropdown interaction to it, and it worked. I can't apply ANY dropdown interaction to that element. It looks like it's because it was originally created as a menu button instead of a dropdown toggle (even though it functions exactly the same way and even has a "drop down" function in its settings), so it isn't recognizing the dropdown state.

I believe this is a bug. You would need to recreate the menu specifically as a dropdown instead of being a menu button. Everything else would remain the same, with dropdowns instead of click events. Whoever did it that way was not thinking ahead or didn't mean for the button to be used this way.


#12

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