Archived topic
Blog page navigation background color
5 replies · Started by B on February 25, 2022
Hi! What's the css selector or Customizer setting to set the background color of the Blog index page's primary nav menu when I've got these settings set in Customizer?
Use Navigation as Header is on
Sticky Navigation is set to On
Mobile Header is set to on
Branding Type is set to Site Title
Sticky is Set to On
I able to enter the following into the Simple CSS box for the Blog index page and it works for all non-blog pages.
.main-navigation {
background-color: #286a30 !important;}
.main-navigation a:hover{background-color: #4ab766 !important;}
More insights: When I hit the page, the nav menu up top is set to a bad color, but as soon as I start to scroll, it changes to the correct one.
Thanks in advance for any guidance!
Hi there,
Try .blog .main-navigation.
If it doesn't work, can you link us to your site?
Thanks! That didn't work so I must have something configured screwy. Sending you my url in private info box...! And thanks in advance!
Hi there,
your site is using a Header Element to a) merge the header with the content and b) change the header/navigation colors.
Simplest fix is to edit the Header Element and Exclude the Blog page from its Display Rules.
You will find the Header Element in Appearance > Elements or when viewing the page you can use the Admin Bar > Elements menu.
More info on the element here:
https://docs.generatepress.com/article/transparent-header-and-navigation/
That did the trick! Thanks mucho!
Glad to hear that!
