I have an site built in Elixir’s Geometric theme but have recently noticed something I previously missed regarding the sub menu items on mobile devices.
The theme is designed so that on desktops the sub nav menu appears not as a drop down but as a row of items underneath the top level menu. On mobiles, logically enough, it is a dropdown.
The problem on mobiles is that sub menu items are not immediately visible. Clicking on the top level nav item takes you to that page but does not show you the sub-menu items unless you go back to the menu. It is a scenario where you really need the top level nav to be a placeholder - if only in mobile view.
I have used Marathia’s no-link stack to achieve elsewhere this but it is designed for drop down menus, not menu and has no effect here.
That looks like it’s either a “feature” of a" bug" in the theme.
The CSS that’s built into the theme is setting display to none for both the primary menu (gets replaced with the hamburger) and the secondary menu (no replacement).
@media only screen and (max-width: 768px)
nav#main_navigation, nav#secondary_navigation {
display: none;
}
You could try adding this custom CSS:
@media only screen and (max-width: 768px) {
nav#secondary_navigation {
display: block;
}
}
Many thanks for this @teefers - interestingly the custom css now displays the sub menu on mobile in the same way as the desktop. So Google will send alerts saying clickable elements too close together! If the top level links can’t be changed to a placeholder think I will keep the overview pages but add some menu buttons with visibility on mobile only.
Thanks for your kind offer Doug. At present they space differently on different devices so my feeling is to try some on-page buttons (mobile only) which will replace the text links. I’ll mess around with this approach first.