Streaming live at 10am (PST)

Close menu after clicking in the menu link

#1

Hi, guys!

When i click on the menu, the link it’s going to the section but the menu is still open. I need - it should close after clicking the menu link.

The structure of menu is simple: ( 1- nav-menu / 2- menu-links / 3-link-section )

In the custom code area, I try to insert these 2 codes, but nothing works. It’s going to section, but don’t close after it.

1- First try
('.nav-menu menu-links a').on('click', function(){ (".nav-menu").hide();
});

2- Second try
$(’.nav-menu menu-links a’).on(“click”, function (e) {
menuLink.click().removeClass(“active”);
});

Anyone can help me with this?

Here is my public share link: https://preview.webflow.com/preview/rodrigo-pellegrino?utm_source=rodrigo-pellegrino&preview=a9379d2d5b33cf171543499ae5e61e73

#2

Why do you need custom code for that? Just set up interactions on your menu items that will hide your navigation wrapper on click.

#3

How could I do that? Sorry to ask, but I’m new to the platform.

#4

Set up an interaction on all your navlinks, make it a “mouse click”. You may then just use your “hidedesktopmenu” interaction I guess. When clicked the page will scroll and nav overlay will disappear. Just check your interactions closely - they have missing components. Perhaps they were the menu cross at the top right which should also disappear in this sequence.

#5

Thanks a lot Dram!

Now it’s works! But the close icon, don’t hide with it. :disappointed_relieved:-(

Any solution?

Thanks in advance!

#6

Well, you need to include the close icon in the “hide” interaction like you did with the nav wrapper.

1 Like
#7

Dram once again, thank you soo much!

I made the adjustment in the interaction to hide the close button, just like you said. But after the click, the menu hamburger does not appear, I can not understand the reason, because the hide event is related to the close button - not related with hamburger menu.

Any idea? Can you help me just one more time?

Here is the URL: https://rodrigo-pellegrino.webflow.io

Here is my public share link: https://preview.webflow.com/preview/rodrigo-pellegrino?utm_source=rodrigo-pellegrino&preview=a9379d2d5b33cf171543499ae5e61e73

#8

Ah, it seems you need one more step in your interaction - to make burgerIcon appear. Just add it to this same hide desktop menu interaction.

#9

Hi Dram,

I just add “burgerIcon” into the interaction hide desktop menu, but for any reason after the interaction the doesn’t appear.

Anyway, thanks for the help!

#10

I don’t think you did.

33%20AM

Also remove the nonexistent elements from the interaction, this may cause crashes in the designer.

#11

Dram, I had done it before but it did not work.

Now I made in these sequence, like you say:

1- closeIcon = hide
2-burgerIcon = show

I’m soo sorry, but I really do not understand why it does not work.

Can you check for me again please?

#12

The close icon does not appear, it’s ok!

But the burger icon, even after inclusion in the interaction, still does not appear.

#13

No worries, mate, we’ll get this fixed.

Here is how you do it:

  • do not add anything in regards to burger icon to the hide desktop interaction.
  • Instead add another on click interaction to the menu buttons, that is called BurgerIconAnimation-Out. This is the one that makes a burger appear.

We need to add another interaction because appearance of the burger icon is very complex, so integrating it would be tedious. So we are using already present interaction!

1 Like
#14

Thanks a lot Bro! Many many Thanks!

It’s works like a charm!

1 Like