[Resolved] Styling Sticky Header

[Dan]

I would like to know how to change the color and transparency of the Sticky Navigation Header. White is fine for now. Just want to learn how. The site is currently located at http://crushtheresistance.com/

Thanks!

[Leo]

Hi there,

Try this CSS:

.main-navigation.navigation-clone {
    background-color: rgba(74,94,155,0.7);
}

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

[Dan]

That did the trick. Thanks!

For anyone who comes across this post who may be interested in a white background for the sticky header, I am using this:

.main-navigation.navigation-clone {
    background-color: rgba(255,255,255,1.0);
}

If you want it white with 50% transparency, change that 1.0 into a 0.5.

Of course, black instead of white would be zeros instead of 255’s.

[Leo]

For white you can use background-color: #ffffff; as well 🙂

[Dan]

LOL! Of course, you are right. Once I figured out how to do white in RGBA, I then thought about how to remove the transparency, hence I ended up with (255,255,255,1.0). Talking about making things more complicated than they needed to be! 🙂

[Luís]

Hello. My main navigation bg is transparent with white menu text. I’m using this code to make my Sticky Navigation white but how can I change the Sticky Nav menu text color to black? Thanks.

[Leo]

Try this CSS:

.main-navigation.navigation-stick .main-nav ul li a {
    color: #000000;
}

[Dan]

And for what it’s worth, the site I was playing with is essentially a testing site right now and is not necessarily relevant to this conversation. 🙂

[Luís]

Thanks Leo. As we’re on it (and there’s no native options to edit it in GPP) what css can I use in order to change the sticky menu “hover” and “current” text colors?

[Leo]

This should help: https://docs.generatepress.com/article/changing-navigation-colors/

Just replace the start .main-navigation with .main-navigation.navigation-stick

[Luís]

Hi Leo… Tried the css you suggested but even replacing what you say to replace, there’s no code in that page to achieve what I want. Some frustration growing on here… Ok… please look at a short video I made so to better understand what I need.

I just want the sticky menu to have exactly the same hover text color and current text color as in the fixed menu BUT (because the sticky menu background changes to white) i need the sticky menu text BLACK.
But as soon as I add the css code to change the sticky menu text color to black, it overwrites all the settings from page header advanced custom navigation colors.

In the video I’ll show you my GP page header advanced settings and the menu behaviour with those settings. Then I’ll add the CSS code to change the sticky menu text color to black and I’ll show the menu behaviour end result.

So in short, i just want the sticky menu with same behaviour as the fixed menu but with black color in the text so it is visible in the white background.

Video –> https://www.useloom.com/share/9fae92897824423a95f1058d0e5d79a4

I really hope it helps.

Luis

[Leo]

I’m not quite seeing the problem? Looks like it’s doing exactly what you wanted?

Which part is wrong? Any chance you can duplicate that on a live server so I can see the code easier?

Sorry if I’m missing something. We will get it figured out 🙂

[Luís]

Hi Leo. Let me explain like this. Currently this is how the colors are:

FIXED MENU(main nav)
1 – Text color = WHITE
2 – Current page text color = ORANGE
3 – Hoover text color = ORANGE

STICKY MENU(main nav)
4 – Text color = BLACK
5 – Current page text color = BLACK —-> I want ORANGE here
6 – Hoover text color = BLACK —-> I want ORANGE here

So, in 5 and 6 I need css to turn it to ORANGE.

I’m setting a live server. where can I send you login access?

[Leo]

Hmm looks like you haven’t added the hover color CSS for sticky navigation though?

Should be something like this:

.main-navigation.navigation-stick .main-nav ul li > a:hover, 
.main-navigation.navigation-stick .main-nav ul li > a:focus,
.main-navigation.navigation-stick .main-nav ul li.sfHover > a {
	color: #FFFFFF;
	background-color: #1e72bd;
}

[Luís]

Hi Leo. I know I didn’t added the css. I didn’t know what css to add and that was the all point. You did back there already pointed me out to a page with the exact last snippet you added above but it didn’t turn out well back then. This time I managed to tweak it the way I needed. So this is how it ended working. I hope it helps somebody else searching the same end result.

Thanks!

/* sticky menu > set main nav bg color (for transparency decrease value 1.0) */
.main-navigation.navigation-clone {
background-color: rgba(255,255,255,1.0);
}

/* sticky menu > set main nav text color */
.main-navigation.navigation-stick .main-nav ul li a {
color: #000000;
}

/* sticky menu > set main nav text hover color */
.main-navigation.navigation-stick .main-nav ul li > a:hover {
color: #ff7331;
}

/* sticky menu > set main nav text current color */
.main-navigation .main-nav ul li[class*=”current-menu-“] > a {
color: #ff7331;
}

[Author]

Posts