[Resolved] How to merge content wrapper into page header – example attached.

Home Forums Support [Resolved] How to merge content wrapper into page header – example attached.

Home Forums Support How to merge content wrapper into page header – example attached.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #866627
    authorityrocket

    Hi there team.
    First, LOVE this theme!

    Ok, so I actually have 2 questions:
    1. How can get my content wrapper to merge into the page header like this site here – https://airbridge.net.au/services/

    2. How can we make page headers mobile friendly? I’m working on a friends site at https://www.fieldsecurity.com.au/ and the homepage page header doesn’t resize the text or anything on mobile view?

    Would love your input.
    Thanks guys!

    #866683
    Leo
    Staff
    Customer Support

    Hi there,

    1. Looks like you’ve figured this one out? If not take a look at these articles:
    https://docs.generatepress.com/article/transparent-header-and-navigation/
    https://docs.generatepress.com/article/page-hero-examples/#example-2

    2. Instead of writing inline HTML style like you currently have:
    <h1 style="font-size:60px; padding-left:120px;"> Who's Watching Your Property <br>When You're Not?</h1>

    Try doing this:
    <h1 class="page-hero-h1">My title</h1>

    Then you can use CSS like this:

    .page-hero-h1 {
        font-size: 60px;
        padding-left: 120px;
    }

    Then target modile like this:

    @media (max-width: 768px) {
        .page-hero-h1 {
            font-size: 60px;
            padding-left: 120px;
        }
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    More info here: https://docs.generatepress.com/article/responsive-display/

    Let me know if this helps ๐Ÿ™‚

    #866689
    authorityrocket

    Thank you Leo.

    I’ll give the mobile code a try.

    However, regarding the first question – I meant how can I have the main content box overlay the page hero/header.

    If you look at https://airbridge.net.au/services/
    Their content box overlays their page hero.

    I’d love to be able to do the same thing. So, nothing to do with the header/logo but what I mean is the content box overlaying the page hero.

    Sorry for the confusion on that and thanks for getting back so fast.

    #866697
    Leo
    Staff
    Customer Support

    Something like this should help with the merge:

    .separate-containers .site-main {
        margin-top: -200px;
    }
    #866698
    authorityrocket

    YES!!!! PERFECT.

    Thank you so much Leo.
    You’ve been a massive help. Much appreciated.

    #867258
    Leo
    Staff
    Customer Support

    No problem ๐Ÿ™‚

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.