Streaming live at 10am (PST)

Nav toggle initial state is not working, but its active


#1

Hi guys :smiley:

I am creating a navigation in my Webflow portfolio project, and there is an issue I cant get rid off.
My settings show that the initial state of the 2 lines is set the way, that they are horizontally and parallel to each other. So no problem here. But when I change to view mode, the initial state just changes to the X and not the = for a reason I don’t get. And when I click the X, the navigation opens. I made a screencast so that you see the issue. When I try then a second time to click it in the video, it works. Its only about the white box which fly out, not the nav links.

But the initial state is when I reload again the X and not the =

Don’t know how to solve that.

Hope you can help me! Many thanks, I really appreciate your help!

Video of issue: https://drive.google.com/file/d/12n_HL4R9u4X_7pvLrpUKL8ISPA_psBN8/view?usp=sharing


Here is my public share link: https://preview.webflow.com/preview/portfolio-c14fc3?preview=7842cc1ae81bd56da6115531353fb45e
(how to access public share link)


#2

Hi @cedi44

It looks like you are using the native navbar, and also there is a ‘legacy’ interaction on click as well as an Interactions 2.0 on the same element.

This worked for me:

  • Toggle to the legacy interactions - ‘select none’
  • Toggle back to the new interactions panel, and select the mouse tap
  • Go to the 2nd click ‘close menu’ animation
  • Delete the first 4 (the ones with initial state)

Preview…voila…hopefully!

Hope that helps/fixes it!


#3

@StuM Wow thank you very much, it worked out! :slight_smile:
Have a great Sunday :smiley:


#4

Excellent, glad it fixed it - make sure to tick the ‘solution’ box just down there on the right :+1:

I was working on a similar hamburger a few weeks back so it was fresh in the mind - it’s easy to think you need to add the same steps to both hamburger states, but actually the ‘close’ already has it’s initial state defined by the ‘open’…so the ‘close’ needs less steps :slightly_smiling_face:


#5

@StuM Thanks, was a great help. Yeah clicked it :slight_smile: