[Resolved] make primary & sticky nav background colors different

[Cynthia]

I’m trying to set the sticky nav background color to a solid color while the primary background color to “clear” or none, but they seeem to be linked.

if I set the primary background color to none then the background color of the sticky nav disappears too, but I want it to stay solid.

I will email a PDF screenshot.

Also the sticky nav is stuck on “contained” and I would like it to be full width on desktop/laptop, where would that setting be?

[Elvin]

Hi,

if I set the primary background color to none then the background color of the sticky nav disappears too, but I want it to stay solid.

You can remove the background color again and add this CSS code:

/* Remove static header bg and place it above hero */
header#masthead {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    z-index: 1000;
    background: unset;
}
/* Add background to sticky */
nav#sticky-navigation {
    background-color: #022e32;
}
/* remove max-width on sticky */
nav#sticky-navigation .inside-navigation.grid-container {
max-width:unset;
}

Here’s how to add CSS:
https://docs.generatepress.com/article/adding-css/

Here’s how it’d look like – https://share.getcloudapp.com/L1uQZNDo

[Cynthia]

That worked! Thank you!

[Elvin]

Nice one. No problem. 🙂

[Author]

Posts