I’m new to webflow and can’t figure out the stock nav bar.
When I use the navbar feature the site and hamburg icon i’m having some problems. The subcategories on mobile hard and don’t drop down right. I also can’t find an active state so the main category stay highlighted.
On the website, the drop down comes in too fast and hard.
Do I have to do my own custom navbar with interactions?
https://prestoncitybible.webflow.io/
Thanks!
Hey @arthurlarin,
Welcome to the community mate!
Could you share that read-only link with us - here’s how
When you say not dropping down right, is it that they fill more than the screen can handle? Or is it the issue with miss-clicking the tab and it closing the whole menu?
I almost always build a custom nav, but you should be able to use the native controls without issues.
Thanks
ok thanks. here is the share link.
I’ll try a figure out a custom one.
Its a bit strange on desktop, mainly because of the open on hover. I’d probably turn that off and shift that close delay firstly.
You could explore using the overflow settings to add a scroll bar when required, but this might require some tweaking.
I think the easiest fix would be to reduce the padding on those links, they’re currently really large with 30 top & bottom + extra margin. This will help keep all those links on screen
Thanks. I decided to take your advise and do custom nav and a different mobile nav. One more question if you don’t mind. On desktop I setup custom drop downs and they work except for 1 thing. On hover they dropdown and when you move the mouse to click a link, it closes right away. I tried a delay before close but it either stays too long or not long enough. Plus if you move to another menu the first menu may still be up.
There has to be a way to keep the drop down open until the user is done. Also how do i make the drop down not show on my workspace when I am done?
Hey,
You can make a custom menu, but you don’t necessarily need to make custom a dropdown element, I typically just use the native drop-down element inside of a custom mobile menu. The main issue with yours is that the size (height) of the links, so when some of the drop downs are open it expands outside of the viewport. Once you’ve changed the height and removed the on hover interaction to just on click, I had no issues.
Going down the custom menu route is what you will do eventually, the native Webflow element works great to get you started tho… but if you feel ready I always recommend building out your own as you just have so much more control.
To hide the menu from over your workspace, just set the height to 0% once you’ve finished editing (With overflow hidden) and then in your interactions on click of the burger, it will go from 0% (the initial state) to 100% (Fill the screen). So basically change height of it to 100% to edit it and then back to 0% before you publish.
Building a custom drop down is a bit more complex, but basically you need to have a hover trigger effect on the dropdown div, which has the dropdown pane inside of it. So that when you hover on the dropdown, it either shows / changes size of the dropdown pane inside of it while still holding that hover trigger as you are still on the element, but inside of it is the actual pane with links etc etc.