[Support request] Different navigation colors

[Jana]

Hi – how do I make the front page primary navigation color different from the rest of the site? Thanks.

GeneratePress 2.2.2

GP Premium 1.7.8

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jana]

No, on these pages I don’t want to merge the site header. Just want to change the colors of the primary navigation content.

[Leo]

Can you link me to the page in question?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jana]

Sure, any page from the home page:
http://69.89.27.245/~animama7/test
Thanks, Jana

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jana]

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.

[Leo]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jana]

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!

[Leo]

Your site is under coming soon page so I can’t see.

Can you unlock it with the CSS above added?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts