Top Naviagtion Bar problems on Mobile

I’m working with v9.1.3 and using the atomik theme. I’m using the top navigation bar block however it is having problems on mobile devices with accessing sub-menus.

If there is a sub-menu it is displayed with a down arrow. On desktop, mouse hover drops down the list of sub-items so one can be selected. On iPhone the user can click the down arrow to get the clickable sub-menu but on android (at least on my samsung tablet) clicking on the down arrow acts as if the click had been on the menu item itself and it navigates to that page, thus making it impossible to select any of the sub-menu items.

I’m sure I can’t be the first person to be using sub-menus so what is the solution? What am I missing?

I suspect it MAY be related to the later version of bootstrap now in use. I never had this issue using v8.

hi @kenmoore - that would be a good thing to report here so folks can verify it and schedule it for a fix if verified:

My initial thoght was to verify if others have experienced this problem - or is it just me?

If you can replicate it on a vanilla demo site, I imagine it’s a general problem - give it a go here and if you can recreate it then it will probably be a good idea to create an issue then:

Thanks for that. I’ve created a new site with no modifiaction and still get a problem on my android tablet.

Off to report a potential problem!

1 Like

Thanks for recreating that and reporting the issue, @kenmoore! It’s much appreciated. I’ll badge you with the bug reporter badge :+1:

I resolved this problem in block setting for Navigation.
In Stacks and global area go to Navigation.
Edit block and disable option Enable sticky navigation bar on scroll if theme supports it.