I built a custom navbar that opens from the bottom of the screen.
When you click the navbar the menu scrolls up. On the second click of the navbar the menu scrolls away.
That’s working fine.
I’ve also put a mouse trigger on the menu div, to close the menu when you click anywhere outside the menu.
Two problems occur when you click outside the menu.
On the click down of the menu div it seems to highlight and change the div color for some reason.
More importantly, after the menu closes and I try to click on the menu bar to open the menu, nothing happens. I have to click a second time for the menu to open.
If I just click on the menu bar it opens and closes the menu with no problems, and no flicker.
Here’s the public share link:
and the staging site is here:
IMPORTANT: the menu only appears at the tablet break point and below.
Here’s a video showing the problem:
Answering my own issues:
Flickering can be fixed by adding this into my custom code referring to the navmenu div
The 2nd click problem is a known problem that I finally saw people talking about by searching “webflow 2nd click” and came across this…
Having wasted a few hours trying to create a custom nav using the click trigger show/hide a menu that also needed to match the opened/closed state of the nav menu toggle icon, I realise there are a fair few people who have had the same issue and would like to request a non-hacked solution please!
@vincent is usually involved and helpful in many of these) :
So, perhaps a “toggle” type functionality or an option to ‘reset’ after the first click?
(after a lot of messi…
The upshot is that 2nd click approach isn’t good for this type of interaction, where another object toggles the interaction. So you really need to split it up into 2 objects with separate interactions.