Archived topic
Feature Request - Set background color/styling for sticky header
3 replies · Started by Austin on March 9, 2022
I find that I am frequently using custom CSS (as described here) to set the background color of the sticky header. This is useful for example if the background color is white with black text by default, but I want a black background with white text for the sticky header.
Is there a better way to do this than custom CSS? Maybe an element?
Could this be added in a future release to the color customizer? I would like to set the color and opacity.
Hi Austin,
That’s a great idea. I’ll raise this as a feature request.
For now, here is a CSS that links to the Customizer Global Colors to alter the background color and color of the links in the sticky nav:
.navigation-stick .inside-navigation {
background-color:var(--base);
}
.main-navigation.navigation-stick .inside-navigation a {
color:var(--contrast);
}As mentioned, these use colors from the Global colors in Appearance > Customize > Colors. You may choose a different Global color by replacing base and contrast with the CSS variable name of the Global color you wish to use. Take note that you may also create your own new Global colors
See: https://share.getcloudapp.com/nOuRdN9L
Hope this helps! :)
Thank you!
You’re welcome Austin! Glad to be of assistance! Feel free to reach out anytime if you’ll need assistance with anything else. :)
