[Resolved] mobile submenu dropdowns always open

[Jem]

Hi, I’m having trouble with the mobile menu. I think it was a result of upgrading to 2.0. I’m developing a client site using Chrome/Win 7, and the mobile emulator displays the menu/submenu as expected (submenus closed until arrow clicked), but in Firefox desktop and Chrome/Firefox on mobile (Android) the submenus are open by default, although due to CSS colors not visible until the submenu arrow is clicked.

In the style.min CSS .main-navigation ul ul is set to display: block, if I change that to ‘none’ in my mobile CSS it all works again.

Is this a setting I’ve missed somewhere or a bug? Let me know if you want me to revert the CSS so you can see.

[Tom]

Hi there,

Here’s how it loaded for me in Firefox on desktop: https://www.screencast.com/t/qhzFQ0c7lSb

I also checked it out on my Android phone, and the mobile menu was collapsed by default.

We moved away from using display: none as it’s not good for screen readers.

Perhaps try clearing your caches?

[Jem]

Hi – sorry, what I meant was once you open the menu it was displaying all submenu items as open (but not legible due to CSS colors until clicking the submenu arrow) by default. As I say I changed the CSS as above so it was working again. I’ve now removed my mobile CSS addition to recreate the issue, could you have another look? It also happens in Chrome now.

[Jem]

OK, so you were (of course) right – despite clearing the site cache it was still a problem, but after disabling and re-enabling the cache and minify plugins and clearing the browser cache on each device everything’s good. Apologies. Feel free to delete this thread.

Thanks for this theme.

[Tom]

Glad you got it working 🙂

[Author]

Posts