[Resolved] Turning off mobile header

[Donna]

Hi

I’d like to use my desktop header on mobile. In the customizer when I turn off the mobile header, it looks great, exactly how I want it with the desktop header at the top, and the mobile menu centered underneath. But, once published if I check on my mobile there’s no header or menu at all.

The only way that I can get the menu, or header to show up on mobile is if I use a mobile header.

Is there any way that I can use my desktop header on mobile?

[Ying]

Hi Donna,

You have this CSS in your site which is hiding the navigation and header:

media (max-width: 768px)
    #site-navigation, .site-header {
        display: none!important;
        opacity: 0;
    }
}

I’m not able to tell where it’s coming from, you could try to deactivate all plugins except GPP to eliminate the conflicts from other plugins, then activate them one be one to see which one is causing it.

For temporary solution, you could this CSS after you deactivate the mobile header.

@media (max-width: 768px) {
    body #site-navigation, body .site-header {
        display: block !important;
        opacity: 1;
    }
}

Let me know 🙂

[Donna]

Hi Ying

Thank you so much. Seems to be my page speed plugin.

[Ying]

Awesome, glad you figured it out 🙂

[Author]

Posts