[Resolved] Disable Header on mobile

[Karel]

Hello,

I have full-screen elements header for all posts on desktop, but I would like to disable that header for mobile devices and have only the H1 with meta-data.

I´m trying to figure out how to do it but still no success … I tried already

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

but that disables even front page header which I want to keep.

Thank you for any advice 🙂

[Leo]

Hi there,

Try this:

@media(max-width: 768px) {
    body.single #mobile-header {
        display:none !important;
    }
}

Let me know 🙂

[Karel]

Hi Leo,

Sorry, that did not work, no change.

[Leo]

Ahh that’s because you are using the mobile header.

Do you only want to hide it on home page?

Let me know 🙂

[Karel]

No, I want to hide header in every post, but keep it on home page.

[Leo]

Can you try the edited CSS here?
https://generatepress.com/forums/topic/disable-header-on-mobile/#post-872841

Let me know 🙂

[Karel]

I tried the edited one, but it is hiding my logo and menu button ( not the featured picture).

I would like to keep menu button, logo and post title with metadata. I need to hide only the featured picture in the header ( except Main page ).

[Tom]

You could try this:

@media (max-width: 768px) {
    .single .page-hero {
        display:none
    }
}

Let me know 🙂

[Leo]

Make sure to choose merge on desktop only for that page hero as well:
https://docs.generatepress.com/article/header-element-overview/#merge-with-content

[Karel]

It seems like it works.

The header is hidden now but with him even Heading with metadata … is there any chance to show it without a featured image?

Or i have to make another Heading ?

Thank you for your help 🙂

[Leo]

Hmm give this a shot:

@media (max-width: 768px) {
    .single .page-hero {
        background-image: none;
    }
}

[Karel]

well, no success with that so I will stick with …

@media (max-width: 768px) {
.single .page-hero {
display:none
}
}

and I will make a new Heading.
Is there any way how to show metadata ( like {{post_author}} | {{post_date}} | {{post_terms.taxonomy}} ) under the new heading?
Probably with use of hook right?

[Leo]

Hmm how come the CSS here didn’t work?
https://generatepress.com/forums/topic/disable-header-on-mobile/#post-875196

What was the issue? Can you apply it so I can see?

[Karel]

Sorry my mistake, the code is working but not as I need.

I would like to have full-screen header with a picture on the desktop , but for mobile devices, I would like to have only Heading and Meta-Classes ( {{post_author}} | {{post_date}} | {{post_terms.taxonomy}} ) under it.

For example:

Lovely day in London
By Charlie / 22.04.2019 / In the United Kingdom

Sorry for any misunderstanding.

[Leo]

I’m still a bit confused…

Isn’t the format you want the same as the page hero without the background image?

What exactly wasn’t working when this CSS is used?
https://generatepress.com/forums/topic/disable-header-on-mobile/#post-875196

[Author]

Posts