[Resolved] Disable mobile Navigation

[Johannes]

Hi, I am not able to disable the Primary navigation ( I try to do it from the edit page – disable elements ) from showing up in mobile view.

regards
Johannes

[Tom]

Interesting, you’re correct – this is an issue.

On that page, you can do this:

@media (max-width: 768px) {
    .menu-toggle {
        display: none;
    }
}

I’ll get this added into the next version 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Johannes]

Thank you.

I can not make this happen.

The code you give me should do this on all pages?
If page id is 4, how does CSS code look like then ?

regards
Johannes

[Jamal]

You can install Tom’s Simple CSS plugin and add the code on that particular page
https://generatepress.com/knowledgebase/adding-css/

Alternatively, you can do this:

@media (max-width: 768px) {
    .page-id-4 .menu-toggle {
        display: none;
    }
}

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Johannes]

Hi, as I mentioned this code does not do the trick. The mobile version of the primary menu still appears when visiting the page from mobile or other small screens.

@media (max-width: 768px) {
.menu-toggle {
display: none;
}
}

regards
Johannes

[Jamal]

Sorry but have you tried putting the code in simple css? If it still doesn’t work, would you mind sharing your site link?

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Johannes]

Hi Jamal,

Here it is: http://www.allnor.no/bbtest/

On this page both Primary and Secondary navigation is disabled in admin. It work ok on wide window browsers but on small browser windows the Primary navigation occurs. And yes the code is added in simple CSS.

This website is only for testing purposes.

regards
Johannes

[Tom]

Ah, you’re using the mobile header.

In that CSS, replace .menu-toggle with .mobile-header-navigation.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Johannes]

Hi, I had to add the !important code. now it works ok.
When will this bug be fixed?

regards
Johannes

[Tom]

In GP Premium 1.2.93 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alex]

Hey Tom,

I haven’t been able to disable mobile navigation on my site using both the .menu-toggle and .mobile-header-navigation. I have been putting it in the Additional CSS area in the WordPress Customizer. Should I be putting it somewhere else? My website is htt://www.narra.life/homev3

Thanks!

[Tom]

Are you wanting the “Login” link to still display?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alex]

Actually I was looking to disable the navigation entirely, so both the logo and the Login… and the toggle. At the very least, I need the logo removed. It is too big on mobile.

[Tom]

Ah, that’s much easier.

This should do it:

@media (max-width: 768px) {
    .main-navigation {
        display: none;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alex]

Wow that was quick, you rock!

[Author]

Posts