Streaming live at 10am (PST)

How to close a custom menu over lay

Hi Team

Struggling a bit with closing a custom navigation… I have it opening fine… I feel like it should be easy and i’m doing something quite obviously wrong, any help would be much appreciated

https://preview.webflow.com/preview/spring-4?utm_medium=preview_link&utm_source=designer&utm_content=spring-4&preview=57e7fc33a65c9ed877acbce8e27ad24d&pageId=5e301f13388bea729cf1f97b&mode=preview

https://spring-4.webflow.io/test

MAny thanks


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

Hi tommyboy82 I have took a screenshot of what the animation sequence should look like for the nav wrapper on the first and second click which worked for me.








https://www.hippovideo.io/video/play/1lvcNOeEHcMLV3clCzKMbKMISopmY4pqTaLoDp9R9k8?utm_source=hv-campaigns&hreferer=private&

Watch Video

Hi @kab653

Thanks for taking the time to reply… I have copied you sequence I believe… but im still struggling with a the close of the nav div and also being able to action the the nav item again when re-clicking… this is my first real time trying to create with interactions so excuse my lack of knowhow

Hi @tommyboy82

Can you provide me with some screenshots? So i can see where the issue is.

Hi @kab653

I think i’m almost there, the nav doesn’t fade on first open but it is closing now

https://spring-4.webflow.io/test

Please find screen shots below

Thanks

Screen recording… not great quality but you can see the difference between the fade and no fade at the start

https://recordit.co/yieDbkFJz1

Copy this sequence on the nav open. This should solve your problem. It worked for me.



![image|690x388](upload://q4TWJcEwM6w7D7TUII02qzjEq8z.pngC

1 Like

@kab653

That appears to be working for me, thank you so much… so in theory I could replace the opacity with a move transition if I wanted… still getting my head around these interactions :smiley:

Hi @tommyboy82

If you wanted to you could replace the opacity with the move function. Here is a project I am working on at the moment you can take at look at how the nav bar works. In terms of search, opening and closing as well hiding and appearing on scroll.

https://kabeers-cool-project.webflow.io/

let me know what you think. Also if i solved your query can you please press the solution button thanks :slight_smile:

Thanks again for your help, I like your website too, would be a great one to dissect

thanks

@kab653

Hi again… I have noticed that I can’t get this to work on mobile… as in it defaults to the native hamburger icon even tho I have disabled it for all devices?

Thanks

Tommy

Hi @tommyboy82

The nav is showing the hamburger menu is set to tablet mode. Also opening and closing the menu on desktop isnt working anymore?
I see you made a few changes

Hi @kab653

The menu is working fine for me on https://spring-4.webflow.io/test

Send me a preview link please

Maybe the read only link is out of date?

here it is again https://preview.webflow.com/preview/spring-4?utm_medium=preview_link&utm_source=designer&utm_content=spring-4&preview=57e7fc33a65c9ed877acbce8e27ad24d&pageId=5e32f2d17e714c33b82d260c&mode=preview

The menu on the mobile and table it is working fine for me?






it works fine for me too in the designer… but when I view it on my mobile phone… I get the default hamburger… I tried private browsing thinking maybe it was a cache issue?!

Yes must be a cache issue i have just tried it on my phone and it is working fine. I would suggest resetting your browser settings and clearing the cache hopefully this should resolve the issue. You could also try downloading a third party browser and try it on there but it is working fine on my phone.

1 Like

Smashing… thank you for your time again