Dropdown links stop working in mobile view

[nicholasvi]

Hello fellow forum dwellers,

In mobile view preview mode, the Dropdown links in my nav menu work just fine. Upon being clicked, they dropdown as expected and reveal their sub menus.

However, when I publish my site and actually check their functionality on my iPhone with both Safari and Chrome, I find that upon being tapped, the Dropdown Links direct straight to a specific page within the Dropdown Menu as if they are a simple Nav Link, instead of actually dropping down and revealing the Dropdown Menu options. It seems as thuogh if you tap the actual Dropdown word, it links to a specific page but if you tap the dropdown arrow, it reveals the dropdown as expected. This is hit or miss, though, which makes it all the more infuriating

In order to experience this problem for yourself, you will have to go to the published website link on your mobile device here: https://wpf2-972be0.webflow.io/

Also, please visit my site’s Read-Only Link for a deeper look.

Many many very grateful thanks in advance,
Nick

[vincent (Vincent Bidaux)]

I checked on mobile and yes, it behaves as you’re describing it.

The navbar and dropdown items are precomposed elements, that are often suffering a bit when you overstyle them or fiddle with them too much.

Please remake your navbar without styling it, check if it works, then carefully style it again, checking for bugs regularly. Now that you know how it should look, maybe you’ll fiddle with it less. I’m sure it’s going to work if you redo it (use different class names for everything), and it’s not going to take much time.

[nicholasvi]

Thanks for the help Vincent. It seems that starting from scratch has fixed the issue.

HOWEVER, now I’ve run into a new problem that I simply cannot figure out! If you click on the dropdown item ‘Projects’ in the navbar in mobile preview mode, the whole nav menu correctly resizes in width to accomodate the longer ‘Projects with Overseas Partners’ nav link.

But when you actually check this on a mobile browser, the resizing doesn’t occur and the ‘Projects with Overseas Partners’ nav link is simply cut off (check attached screenshot). This is obviously undesirable. Do you know how to fix this please, Vincent?

THANK YOU IN ADVANCE!

[mistercreate (create.something)]

Hi @nicholasvi,

Hmm, that does sound like odd behavior.

I was able to take a look at your project on our Google Pixel, Android phone and it seemed to look as expected:

Would you be able to share what phone and browser that is being used?

We’d be happy to test for you.