Archived topic
Different navigation colors
9 replies · Started by Jana on March 28, 2019
Hi - how do I make the front page primary navigation color different from the rest of the site? Thanks.
Hi there,
I'm assuming you are wanting to merge the site header with the content?
If so try our header element as it will allow to set a specific navigation/header color for that page hero:
https://docs.generatepress.com/article/transparent-header-and-navigation/
Let me know if this helps :)
No, on these pages I don't want to merge the site header. Just want to change the colors of the primary navigation content.
Can you link me to the page in question?
Sure, any page from the home page:
http://69.89.27.245/~animama7/test
Thanks, Jana
So the home is what I meant by merged, which you can replicate using the method I linked above and switch the navigation color for just that page/header element.
Then the navigation color for the rest of the pages can use the settings from the customizer.
Let me know if this makes sense :)
I totally getting this more! But I can't find a place for the Sub-menu items in the elements so they don't change with customize.
Also, is there a downside to me using a child theme - I thought it was a safety measure.
Generally people try to avoid using transparent background for the submenu.
You can find all the CSS here:
https://docs.generatepress.com/article/changing-navigation-colors/
Just add .header-wrap in front so that it only applied to the merged header.
Example:
/* SUB-NAVIGATION */
.header-wrap .main-navigation .main-nav ul ul li a {
background: #222222;
color: #FFFFFF;
}
Hi - why would you try to avoid using transparent background for the submenu?
I tried this but it's not working for me - I'm using a revolution slider as a hero so here's what my code looks like in the header element:
[rev_slider alias="breaking-news"]
Thanks!
Your site is under coming soon page so I can't see.
Can you unlock it with the CSS above added?
Let me know :)