Archived topic
make primary & sticky nav background colors different
3 replies · Started by Cynthia on November 8, 2020
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?
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
That worked! Thank you!
Nice one. No problem. :)
