sticky navigation with merged header

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.

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

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

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/

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

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

Hi Leo,

Case solved, everything works now.

Thanks for your support and most of all patience.
Q

No problem at all :)