My animation behaves different for each trigger

Design help Animations & Interactions
1

Context
The navbar on the mobile version of this website is opened on the first click of a burger-icon, which triggers the “open menu” animation and closed on the second click, which triggers the “close menu” animation. These animations are doing very specific things, but most importantly show/hide the menu.

The problem
I have a link (tjenester) that links to a section on the homepage which makes the nav remain open on that page, since the page is not reloaded on click.

Here is what I’ve tried so far:

  • I attached the “close menu” animation to the link itself, but this did nothing.
  • I tried to wrap the link in a div and put the interaction on that instead, which made the nav nudge a little bit.
  • I made a red square inside the nav and attached the interaction to it and got the same result as the one above.
  • I moved the the red square outside of the nav with the interaction still attached to it, which made the nav hide, but the burger-icon remains an “x”.

I’m feeling very much confused. Anyone have any ideas of what is going on or how to work around this?

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

2

Hello @Sindre_Skoglund-Hans, since you are using a custom nav-bar rather than a native Webflow one, you will have to use some javascript. You can use many methods but one that worked for me in the past is this: 1. Give your menu-icon an id under settings
Screen Shot 2024-02-15 at 4.08.41 PM
2. Give your navlinks a custom attribute
Screen Shot 2024-02-15 at 4.07.33 PM
in this case I named it nav-link with a value of link, but the value is not important.
3. Add this code on your page settings before the /body tag

let fullscreenLinks = document.querySelectorAll('a[nav-link]')

fullscreenLinks.forEach((fullscreenLink) => {
  fullscreenLink.addEventListener('click', () => {
    document.getElementById('nav-icon').click()
  })
})

What this will do is basically press your menu burger close icon every time a navlink is pressed. I hope it helps.

3

That’s genius! It crossed my mind to use JS, but I was overcomplicating it. Simply pressing the close button solved everything.

Thank you!

1 Like