[Resolved] Disable Page-Header For Mobile Only (And use normal header)

[Rylan Urban]

Hey Tom – now that I’ve mostly been able to figure out the page-header addon, I really like it.

There is just one problem – the image that you can have stand in place of the video for mobile just doesn’t look right.

What I really want to do is disable the page-header add on, and then re-activate the site header (which is currently disabled via disable elements).

For example: on http://voyagesolarenergy.com the site header looks great on every page except the home page because I can’t get a style of text that fits both the video for desk top and picture for mobile. So what I want is to use the site header that appears on every page… on the home page.

If that makes sense…

Rylan

[Tom]

Hi Rylan,

Little confused, you said:

So what I want is to use the site header that appears on every page… on the home page.

So why not just remove the page header from the home page, and display the site header?

Let me know 🙂

[Rylan Urban]

Well, I don’t want to remove the page header on the home page because I love it on desktop! Just not mobile…

Desktop:
Page header (home) is awesome
Site header (every other page) is awesome

Mobile:
Page header (home) is not awesome
Site header (every other page) is awesome.

Looking for a way to make the site header appear on the mobile version ONLY.

Rylan

[Tom]

You could try something like this:

@media (max-width:768px) {
    .home .page-header-content {
        display: none;
    }
    .home .site-header {
        display: block;
    }
}

[Rylan Urban]

Almost worked!

The issue is, I have site header disabled on the disabled items option for that page – because when it’s merged, it looks bad.

So when adding the code you gave me – it actually shows no page header and no site header on mobile..

Rylan

Maybe it needs one of those important! tags I see once in a while to override the disable item button.

?

[Rylan Urban]

“header” on disable elements is checked.

When uncheck (because the page header is merged – full screen) – it just doesn’t work out.

needs to stay checked

[Tom]

So if it needs to stay checked, that means showing the site header on the front page isn’t an option, right?

[Rylan Urban]

Correct – because when showing the site header on the front page, it is merged with the page header, and looks like this:

But – I DO WANT the page header on mobile – because it looks good!

… Does not look good on desktop.

So the issue with the code you gave me – I’m sure it would work under normal circumstances, but in this case – the “header” option is checked because of the merging issue in the photo above. So nothing appears on mobile when using that code.

Does that make sense?

[Tom]

Thinking about this more, since you’re using a merged header, the navigation is going to be transparent as well.

In my opinion, you’re way better off using your current set up and tweaking it slightly for mobile if necessary.

[Rylan Urban]

done. Thanks!

[Tom]

No worries 🙂

[Author]

Posts