Hamburger/X interaction issue

Design help Animations & Interactions
1

I feel like I’m missing something really stupid, but I’m having a problem with a basic interaction.

I have simple nav/menu overlay. If you click the hamburger, it turns to an X and the menu overlay displays. Hit the X again and the overlay disappears and the X returns to a hamburger.

However, if you click one of the anchor links on overlay, the overlay disappears (as it should), nav jumps to section (as it should), BUT the X does not return to the hamburger. Instead you need to click the X again to get it to return to that state.

I am using the same interaction for both. Have tried duplicating. Have tried rebuilding.

What am I missing? Thanks!

https://jmk-menuoveraly.webflow.io/

Here is my public share link: https://preview.webflow.com/preview/jmk-menuoveraly?utm_medium=preview_link&utm_source=dashboard&utm_content=jmk-menuoveraly&preview=269c6538dda4b232f466b41f69dc17e0&mode=preview

2

@jmkriz just put the close interaction on the link click for each section. That should solve it.

EDIT: Nevermind, you have that. Try re-applying the interactions within the triggers, I’ve had that help resolve issues like this in the past.

3

Thanks for the reply, but if you see my read-only link you’ll see that I have already done this, hence the confusion.

51%20AM
51%20AM1852×748 108 KB

4

See my edit above…sorry I missed that.

5

Tried it. Even tried to duplicate and re-apply. Tried to duplicate original interaction and reverse everything… still no effect at all. I can start a completely new interaction and move stuff around but it doesn’t seem to recognize the “X” starting point.

6

Anyone else able to take a look at this? I’m at a loss here.

7

@jmkriz this is a weird one, you can see the changes occurring in the inspector on the first click, but nothing happens when you click the links. I tried creating an new interaction that just moves the hamburger lines around a little and applied it and it worked. But for some reason I can’t get yours to work, it just doesn’t seem to trigger.

8

Yeah, it’s weird. Interestingly, someone else posted with a very similar issue yesterday: https://discourse.webflow.com/t/hamburger-icon-breaking-using-multiple-triggers/90774

9

@jmkriz Let me know if you have any luck solving this, I’ll do the same.

10

Try this custom code before the body close.

$(document).ready(function () {
    $('.nav-big-link').click(function (e) { 
        e.preventDefault();
        $('.x-container-for-lines').click();
        
    });
});
11

@webdev Thanks for taking a look. I added this code and published but don’t see any changes.

@AlexanderBiglane Can you try this code with your site and see if it does something for you?

12

Scripts need to be placed in script tags or the browser will treat it as text.

13

How to add custom code …

Note: The script I provided is using jQuery. This is already loaded right before the body close. So this has to be placed after that to work.

14

Durrr… thanks, my bad.

Anyway, yeah! That works. I have no idea why it works, and would like to know why the interaction by itself doesn’t, but hey, I appreciate that!

15

Your sub menu interaction → clicking the submenu menu item and closing it, revealing the section, does not trigger the close of the main menu icon which you opened. All this script does is triggers a click on the main menu element after you click on the link in the menu overlay.

If you modify any classes targeted in the script, you would need to update the script.

16

Interesting. This is fantastic, thank you so much for your help, much appreciated.

1 Like
17

@jmkriz - Don’t forget to mark a solution as a solution. It helps others in the forums find them and take advantage as well.

1 Like
18

Hey @webdev

I was having the same issue as him, could you take a look at my site and see which classes I need to replace for inside the custom code you wrote? I know that’s probably really simple but I tried swapping out a few different classes and it didn’t work for me.

Thanks in advance.

Here’s my read only site : https://preview.webflow.com/preview/alexanders-sublime-project-8b35bf?utm_medium=preview_link&utm_source=dashboard&utm_content=alexanders-sublime-project-8b35bf&preview=6d3e4edcdad2be691c34e82615992d75&mode=preview

and my published site : https://alexanders-sublime-project-8b35bf.webflow.io/

19

@jmkriz I’m glad you got it working, I’m going to try and apply that script to my site as well.

20

@AlexanderBiglane I think you would need to add the following if I’m understanding how this works correctly:

$(document).ready(function () {
    $('.greyblock').click(function (e) { 
        e.preventDefault();
        $('.hamburgersquare').click();
    
    });
});

It needs to be wrapped in script tags and added to the code before the body close. And also needs to be published to work properly.

I think that would do it… but you might want to wait for the expert to be sure.

1 Like