I am slowly designing the templates for my site. I really love the navigation style and placement of the navigation on this site , specially how the menu button drops to the bottom at mobile.
My question is this: is it possible to create this type of menu by styling the existing menu widget? I watched this cool little teaser video on the nav bar and I was hoping that I would be able to customize it to my needs. Any Webflow gurus out there who can weigh in if this is even possible or should I create a nav from scratch?
Full disclosure I am a designer not a coder, but I am starting to feel pretty comfortable with Webflow.
It might be easiest (IMHO) to recreate this from scratch simply by creating a 100% width 100% height div that has Position set to Fixed, z-Index set to a higher number than any other z-Index setting on your site (like… 1000 ) and a dark background color (perhaps with .9 opacity on the color so you can kinda see through it). Place your links in a list and position/style them as you like.
You will then need to copy and paste the menu open button and ensure it is in the same exact spot within your menu div. Use interactions on the “normal” menu button to affect different element (that element being the div) and sets the visibility of the div to visible, then the opacity to 100% with a fade transition time of 100ms. You will then need to use interactions on the button inside the menu div that affects different element (again, that element being the div) and does the reverse of the last interaction you just made. Make sure your “first click” setting is set to LOOP so the clicks can be done over and over and over again. Note: neither of your menu items need a second click interaction, just FYI.
I built something similar for a client that can be seen at Wish Dish - all from scratch.
This takes time, so approach it with patience and you will succeed. I believe I’ve included all the details you need. As for mobile, you can also accomplish this effect but will need to shrink down your links and make sure your button is in good placement (upper left or right corner of topbar) and it should be beautiful.
Thanks so much for the detailed reply- it is greatly appreciated! I will check out your link! I started to approach this from scratch and I made some good progress, but I was stuck on little details like how to make the selected page show as “selected” in the menu when the nav is clicked again (if that makes sense)
Anyway, thanks again and I agree with your advice to exercise “patience”. I have really been enjoying Webflow, but it does take a bit of time to get the hang of that is for sure!
) and a dark background color (perhaps with .9 opacity on the color so you can kinda see through it). Place your links in a list and position/style them as you like.