Archived topic
Hide primary menu mobile
9 replies · Started by Paul on August 27, 2020
Hi I want to hide primary menu on mobile only whilst retaining secondary menu.
I tried this:
.menu-toggle {
display: none !important;
}
But it also hides secondary menu. Is there a wat to target the primary menu only or give it a class?
Thanks
Hi there,
try this:
.main-navigation .menu-toggle {
display: none !important;
}
Thanks but that also removes site logo on mobile. (I added URL if you want to take a look)
Can you disable your cache plugin so can see whats going on?
Hi David - if you append ?nonitro to any url it will disable cache.
I'm still seeing some sort caching going on so unable to see the code clearly.
Any reason why you are setting up the header/navigation layout like this using a primary navigation and a secondary navigation?
Ideally, you would want to disable this option:
https://docs.generatepress.com/article/navigation-as-a-header/
Add the Find Training School button as a header widget:
https://docs.generatepress.com/article/header-widget/
Then you can us the primary navigation below header.
It should work better overall.
Can you give that a shot?
Thanks Leo, that is a better solution - I have made those changes, unfortunately the training school button is now not centered and I can't see why. Have disabled caching so you should be able to see now.
Try this CSS:
@media (min-width: 769px) {
.inside-header {
display: flex;
align-items: center;
}
.inside-header .header-widget {
order: 1;
margin-left: auto;
}
}
Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know if this helps :)
Perfect. Thanks!
No problem :)