[Resolved] “Floating” Header on homepage

[fabiosilva]

Hi!

I would like create a header similar to this image:
https://i.ibb.co/SVXtwvD/menu.jpg

Only on homepage (desktop view, +important), and with a background slideshow.

Any simple way to create this using Generatepress?

I belive that it is possible (using elements and some css), but I am not finding similar cases in this forum.

Thank you! 🙂

[David]

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.

[fabiosilva]

Hi, David

Thank you for your support.

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

[David]

Try this CSS:

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

[fabiosilva]

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.

[David]

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;
    }
}

[fabiosilva]

Solved! Thank you. 🙂

[David]

Glad to be of help

[Author]

Posts