[Resolved] Hide header on mobile

[BarnaB]

Hi Tom,

Is there a CSS snippet to hide ALL page headers on mobile devices ? under x pixel width id should not show….

Thank you

[Leo]

Try Customizer > Layout > Header and disable Mobile Header.
Let me know if this is what you are after.

[Tom]

It depends what you mean by page header? The overall site header? The page header built using the page header meta box?

[BarnaB]

Yes, the page header built in page meta box. Just want to keep the menu and logo on mobile 🙂 i got that big image header on all pages but on mobile they loose meaning due to crop…

Thank you

[Tom]

You could try this:

@media (max-width: 768px) {
    .generate-page-header {
        display: none;
    }
}

[BarnaB]

Hi Tom,

That hid the menu too not just the header image :/

[Tom]

Can you show me the page you’re working with?

[BarnaB]

Sure :

https://fotoalap.hu/

I got the mobile header enabled, but that was affected by the code too :/

[Tom]

Give this a shot:

@media (max-width: 768px) {
   .generate-inside-combined-content {
        display: none;
    }
}

[BarnaB]

Yep, that worked got it saved in my snippet library 🙂

[Tom]

Perfect 🙂

[Author]

Posts