Nav bar interaction

I have been working on a website for a while and had customized the nav bar fairly extensively. I ran into an issue when the nav bar was minimized for mobile. When I clicked on a link within the nav it would not work (worked fine full size). I tracked the issue down and it appeared that a click was firing twice (so the click effect was simply turning on and off in rapid sequence). I assumed it was my customizations.

Here is a simple example. I created two divs, with a button for content, and some color. If you click “Home” you will see that one div disappears. If you click again, div returns. But if you minimize and repeat. Nothing happens (well, I suspect it is clicking twice, but I did not look).

Am I doing something fundamentally wrong or is this a bug?

https://webflow.com/design/testmess?preview=e88e632d3668c846e95aa55da5671637

I opened your site into mobile view and click on the menu items and everything behavec normally… what should we witness?

I noticed that the link (home) on the mobile menu did not make the element switch from block to hidden/none and was able to watch it in the web inspector to confirm. Could not determine why. Desktop - Chrome Version 38.0.2125.111 (current) mac.

I tried setting a delay relay on the interaction calls to see if you could see it, but that was probably a stupid approach as a toggle likely preempts.

I wonder if it is possible to test your bug theory by making each state of the toggle effect separate elements on the page? I think you would have to split it into two interactions? One for object A on first click and one for object b on toggle? No idea if that would work or is even possible - just a random thought. Thinking if they are both affected on a single click you have proven that the click is being doubled in the mobile implementation.

I have never encountered this, so I would start with a clean build and maybe log out of your account and back in to be sure you are current.

There may be a way to monitor / debug clicks through the web inspector, but I am not familiar with how.

vlogic:

Thanks for the confirmation. I submitted a support email as well. I will await their response to see if I am doing something wrong or if it is a bug.

I don’t want to come up with a work around if it is in fact a bug. It appears to work correctly on my phone with the issue confirmed on desktop Explorer, Chrome PC and your submission of Chrome Mac.

I will report back when resolved.

You can add Firefox and Safari desktop mac as well.

Webflow support has confirmed that this is an issue. However, what is not known is whether this is a bug or if the nav component was designed this way. Will have an update in a day or so.

2 Likes

A post was split to a new topic: Trouble with Nav Bar Interaction