- This topic has 15 replies, 3 voices, and was last updated 7 years, 9 months ago by
Leo.
-
AuthorPosts
-
June 16, 2017 at 3:02 pm #334709
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!
June 16, 2017 at 3:42 pm #334723Leo
StaffCustomer SupportHi 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/
June 16, 2017 at 4:04 pm #334727Dan
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.
June 16, 2017 at 4:18 pm #334730Leo
StaffCustomer SupportFor white you can use
background-color: #ffffff;
as well 🙂June 16, 2017 at 4:23 pm #334732Dan
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! 🙂
September 17, 2017 at 11:58 am #386998LuÃ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.
September 17, 2017 at 12:37 pm #387012Leo
StaffCustomer SupportTry this CSS:
.main-navigation.navigation-stick .main-nav ul li a { color: #000000; }
September 17, 2017 at 12:44 pm #387013Dan
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. 🙂
September 17, 2017 at 4:57 pm #387096LuÃ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?
September 17, 2017 at 5:54 pm #387113Leo
StaffCustomer SupportThis should help: https://docs.generatepress.com/article/changing-navigation-colors/
Just replace the start
.main-navigation
with.main-navigation.navigation-stick
September 18, 2017 at 5:30 am #387300LuÃ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
September 18, 2017 at 9:53 am #387472Leo
StaffCustomer SupportI’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 🙂
September 18, 2017 at 11:34 am #387523LuÃ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 = ORANGESTICKY 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 hereSo, 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?
September 18, 2017 at 1:10 pm #387588Leo
StaffCustomer SupportHmm 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; }
September 18, 2017 at 2:13 pm #387628LuÃ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;
} -
AuthorPosts
- You must be logged in to reply to this topic.