Dropdown menu not working on mobile

Dropdown menu not working on mobile
0

#1

Hey, all.
I’ve been working on an updated portfolio page without using any frameworks. It’s mostly working the way I want it to so far, but the *%$#ing dropdown menu doesn’t work on my phone. It works fine on the computer, but on the phone it will open but I can’t activate any of the links. Could anyone who reads this take a minute to try it out on their phone/tablet and just let me know if it works? I’d really appreciate it.

Here’s the link: link

If anyone wants to look at the code, that would be great too.

Thanks for taking the time to read this! All feedback is welcome :slight_smile:

Edit: Forgot to add the link for the code: Link to code


#2

In case anyone runs into the same issue. I figured it out. It turns out the real problem was that I was using Firefox to check it on my phone, but not on the computer. (Valuable lesson learned there believe me)

I was using a ‘button’ tag as the parent of my dropdown menu. Apparently Firefox’s implementation does not allow buttons to share mouse/touch events with their children (as best I understood), so the second the mouse moves out of the button’s area the event is canceled and the dropdown menu ceases to display, or on mobile when the user touches outside the button the same happens.

So, if you care about compatibility with Firefox avoid giving buttons children, and if your having weird problems that aren’t explained by the HTML/CSS/JS spec don’t forget to check the browser’s implementation!

This has been very educational for me.

ciao