[Support request] Best way to style Primary Nav

[Mike]

• I have a site with pages that have light backgrounds and dark backgrounds
• All with merged headers
• I have used the customizer to style the light header and primary nav
• I have a Header Element to Style the Dark “Site Header

Some issues I’m running into for having different dark/light bg complementary color schemes:
1. How to style Nav Search
2. How to style Mobile
3. How to style Sticky Navigation

[Leo]

Hi Mike,

The questions are a little broad but I’ll try my best:

1. There are color options for the nav search in Colors > Primary Navigation

2. What would you like to style on mobile? Usually it can taken care of with some CSS plus media query: @media (max-width: 768px) {
https://docs.generatepress.com/article/responsive-display/

3. What would you like to style? If you are using the merged header, then you can set custom navigation colors for that header:
https://docs.generatepress.com/article/header-element-overview/#navigation-colors

Then the sticky navigation colors would inherit from the customizer (Colors > Primary nav) to create this effect:
https://docs.generatepress.com/article/navigation-as-a-header/#different-logo-and-navigation-colors

If this doesn’t help, any chance you can unlock your site or provide the username/password so we can see the issues?

Thanks 🙂

[Mike]

I’m sorry, I suppose I wasn’t very clear in the beginning.

The problem: I can only style those items for either the light, or the dark background. I need to create an alternative color scheme for those items when there’s a dark background.

[Leo]

That case we would likely need to use some CSS and target specific pages.

Can you unlock your site and guide me to the page in question?

[Mike]

Removed auth, home page & /about for light bg, /books for dark.

Thanks for your help.

I’ve decided to go with an opaque sticky header for sanity’s sake.

[Mike]

Would something like this:
https://generatepress.com/forums/topic/changing-headers-or-deleting-headers/#post-98390
with a slightly different hook and instead of replacing the header adding a class to something that can be used as a CSS selector?

[Leo]

Ok let’s take care of one thing at the time.

Are you using the page hero on the About page just to use the custom navigation colors?

All the navigation colors are actually here:
https://docs.generatepress.com/article/changing-navigation-colors/

To target the sticky navigation, you would replace this part in the code:
.main-navigation with .main-navigation.navigation-stick.

To target specific page, you would add the unique ID in front of the CSS.

For example:

.main-navigation .main-nav ul li a, 
.main-navigation .menu-toggle {
	color: #FFFFFF;
}

Becomes:

body.page-id-xxx .main-navigation .main-nav ul li a, 
body.page-id-xxx .main-navigation .menu-toggle {
	color: #FFFFFF;
}

[Author]

Posts