[Support request] Hide primary menu mobile

[Paul]

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

[David]

Hi there,

try this:

.main-navigation .menu-toggle {
    display: none !important;
}

[Paul]

Thanks but that also removes site logo on mobile. (I added URL if you want to take a look)

[David]

Can you disable your cache plugin so can see whats going on?

[Paul]

Hi David – if you append ?nonitro to any url it will disable cache.

[Leo]

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?

[Paul]

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.

[Leo]

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 🙂

[Paul]

Perfect. Thanks!

[Leo]

No problem 🙂

[Author]

Posts