I have the menu button set to display on all devices but I want the nav menu to fade in/out rather than from top/right/left.
Any idea on how/if this can be done?
Thanks!
Alex
This menu is pre-built by Webflow, and there is no way that I know of to make it behave the way you want. But you still can build your own from scratch. That’s a bit tedious because that’s the whole navbar element that you have to build from scratch. Or ditch the navbar for devices and build your mobile menu by hand, with interaction (you’ll need duplicate menu items though).
Ok, thanks for the response. MAYBE I’ll give it a shot sometime soon!
Thanks
Alex
Hi @aOne!
Here’s a tutorial you can follow to achieve what you want. In order to have fade, you have to built of from scratch (as @vincent stated)
The title of the tutorial is: Nav – Full page overlay (Custom)
You’ll find it here: http://webflowcodestutorials.webflow.io/click
Thanks @StevenP! Works great, only thing now is how can I make the menu icon change color when the menu is opened? Since it is made from scratch, I can’t simply click “open menu” and style the hamburger icon anymore. Is there a way to still make it change color when clicked?
Thanks,
Alex
Hey @aOne you would essentially need to instances of the menu icon with exact same settings. One which is displayed only on menu open, the other only when the menu is closed (using menu open/close interaction to do the display:block/display:none).
I’ve used the Menu Open/Close Interaction quite a bit, and for color changes, you need to instances as we cannot trigger color changes in the interaction panel at this time (maybe one day ;))
Read-Only Link: https://preview.webflow.com/preview/100-days-of-ui-with-waldo?preview=298c68b28daf4e45712586c9fe67e0ae
Live Page Link (see menu interaction, color changes are possibly using multiple elements with similar styling): http://100-days-of-ui-with-waldo.webflow.io/
Does this work with a nav menu that is built from scratch? I don’t have the open/close option. Check out the tutorial posted by StevenP^, I don’t think it gives the open/close option when built from scratch.
You can, If you’re up to it, build the entire burger animation with Webflows interactions.
I’ve done it here on a site I’m currently working on; the burger on the upper left is 100% built in Webflow - no custom code: http://newulrikabeijer.webflow.io/
Here’s a preview of the same site so you can se how it’s setup: https://preview.webflow.com/preview/newulrikabeijer?preview=c19e6520c857e41e3f223411a2748fa5
1 Like
Wow, looks awesome. I’ll definitely give it a try very soon. For now, I’ve figured out a way by placing 2 separate menu icons, one on the page and one in the actual menu (since I needed one black and one white). Thanks guys!
Alex
Yeah, that works well too! 
But if you want to go the extra mile, the interactions in Webflow are really powerful and versatile!
1 Like
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.