"Floating" Header on homepage

Hi there,

create a New Header Element:

https://docs.generatepress.com/article/header-element-overview/

Add your Slider Shortcode to Hero content, and set the hero and inner container to full width.
Go to Site Header tab and enable Merge with Site Content.
Then if you wish you can enable and change the Navigation colors.
Set the Display Rules for Front page

Once thats done, share me a link to the site and ill look at the CSS required to add the space around the nav.

Hi, David

Thank you for your support.

I maked this changes, and update site URL on this topic.

Try this CSS:

.header-wrap .inside-header {
    background-color: #003556;
    padding: 20px 40px;
    margin-top: 20px;
}

Thank you, again!

Works fine!

But, it's possible disable the "Merge" using media queries?

So, basically, I would like to disable the merging content starting "x" page width size.

Remove the CSS i provided and try this instead:

@media (min-width: 768px) {
    .header-wrap {
        position: initial;
    }

    .site-header {
        background-color: #003556 !important;
    }
}

@media (min-width: 1200px) {
    .header-wrap {
        position: absolute;
    }

    .header-wrap .inside-header {
        background-color: #003556;
        padding: 20px 40px;
        margin-top: 20px;
    }

    .site-header {
        background-color: transparent !important;
    }
}

Solved! Thank you. :-)

Glad to be of help