Archived topic
Navigation Dropdown separate for mobile
7 replies · Started by Andreas on April 5, 2022
Hi support team,
is there a possibility or a hack to set the option for "Navigation Dropdown" (Customize -> Layout -> Primary Navigation) different for mobile and desktop?
I'd like to set "Hover" for desktop and "Click - Menu item" for mobile.
My situation: the first level of my navigation has no link
The issue on "Hover" for mobile is, that it's only possible to dropdown a submenu on mobile, when you click the arrow-icon. A click on the first level menu item does nothing.
Same topic you can find here:
https://wordpress.org/support/topic/mobile-menu-make-parent-menu-text-link-open-submenu/
As described, the Astra Theme seems to have a solution for this:
https://drive.google.com/file/d/1EJcDyWn3MABcQa3_nEFTTpDYsmg0TdEr/view
Thanks
Andy
Hi Andreas,
Since your “Parent” menu items have no links, you can add a # to their URL and this should allow the Parent menu items to display the sub menu items on click.
See: https://share.getcloudapp.com/wbuz8nWg
Hope this clarifies. Kindly let us know how it goes. :)
Hi Fernando,
yes, I've tried this already. But when you have a sticky header, this would result in a jump to the top clicking on the first level menu item.
Hi there,
try adding this CSS:
.main-navigation.toggled .menu-item-has-children a {
padding-right: 40px;
}
.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
text-align: right;
}Hi David,
thanks, the workaround works perfect!
For what is the first class good?
.main-navigation.toggled .menu-item-has-children a {
padding-right: 40px;
}
It stops a long menu item text running behind the menu toggle icon on small screens,
Thanks so much!
Andy
You're welcome
