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

[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!

GeneratePress 2.2.2

[Leo]

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 🙂

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

[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.

[Leo]

Something like this should help with the merge:

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

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

[authorityrocket]

YES!!!! PERFECT.

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

[Leo]

No problem 🙂

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

[Author]

Posts