[Resolved] sticky navigation with merged header

[Q]

Hi There,

I’ve been able to create a sticky navigation using GeneratePress and have also done a version using a Elementor Pro shortcode in a GP Hook, which I found a bit tricky.

I have got the example on my website using the GeneratePress version.

I now want to create the effect where you have a merged header with the navigation, but when you scroll down the navigation sticks and turns white, like the two examples below.

https://www.measurelab.co.uk/
http://7oroof.com/tfdemos/wp-experts/homepage4/

Is this possible to create using GeneratePress and if so what would how would I go about creating it?

Thanks
Q

[Leo]

Hi there,

You can use this CSS to change the sticky navigation background color:

.main-navigation.navigation-stick {
    background-color: #ffffff;
}

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

Let me know if this helps.

[Q]

Hi Leo,

I still seem to be having problems with this.

It seems to work in a mobile view but not desktop view, the sticky navigation is still transparent, with the image background behind it.

I have also added this code to the CSS:

.custom-fixed-header {
position: fixed;
top: 0;
width: 100%;
z-index: 2000;
}

.custom-fixed-header + * {
padding-top: 100px;
}

and added to the GP Hooks

Before Header

After Header

If I take the CSS and the code out of the GP Hooks then the white background does not appear at all in both views when I scroll.

Thanks again
Q

[Leo]

Not sure why you needed this?

.custom-fixed-header {
position: fixed;
top: 0;
width: 100%;
z-index: 2000;
}

.custom-fixed-header + * {
padding-top: 100px;
}

The layout you want should be this: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

And just activate the sticky navigation: https://docs.generatepress.com/article/sticky-navigation/

[Q]

Hi Leo,

When I follow the steps you have given me and take out the CSS I was using, the transparent navigation disappears when you go to the page, only when you scroll, do you see the sticky navigation.

What do I have to do to keep the transparent navigation being seen when you are on the page?

Thanks again
Q

[Leo]

Try merging the navigation with content:
https://docs.generatepress.com/article/merging-header-navigation-content/

Then you can set custom navigation color:
https://docs.generatepress.com/article/merging-header-navigation-content/#merging-our-header

[Q]

Hi Leo,

Case solved, everything works now.

Thanks for your support and most of all patience.
Q

[Leo]

No problem at all 🙂

[Author]

Posts