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

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

Home Forums Support Disable Page-Header For Mobile Only (And use normal header)

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #226708
    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

    #226800
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #226979
    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

    #227005
    Tom
    Lead Developer
    Lead Developer

    You could try something like this:

    @media (max-width:768px) {
        .home .page-header-content {
            display: none;
        }
        .home .site-header {
            display: block;
        }
    }
    #227020
    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.

    ?

    #227021
    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

    #227040
    Tom
    Lead Developer
    Lead Developer

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

    #227047
    Rylan Urban

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

    not good

    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?

    #227133
    Tom
    Lead Developer
    Lead Developer

    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.

    #227828
    Rylan Urban

    done. Thanks!

    #227858
    Tom
    Lead Developer
    Lead Developer
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.