- This topic has 12 replies, 2 voices, and was last updated 7 years, 10 months ago by
.
Hi. It seems that no matter what I do, I can’t get the orange in the demo import of the navigation to change to my pink color? (the navigation color after I scroll down and it “sticks” to the top) I’m sure it’s something I’m missing, but I’ve plugged in this color in all the places I know, and I’m still seeing orange? Thanks for your help!
I hope you are well today and thank you for your question.
Please try changing it from theme styling active navigation settings as shown in the attached screenshots.
Best regards,
Shufflehound teamHi. I actually already have that set to the pink that I want it. So that didn’t seem to be the problem…it was still orange.
But I opened the page in Firefox and did the “inspect element” and found that it was this CSS to change (I’ve added my color hex in there for my site). This is what seemed to work, if anyone else has any problems! I just put this in the Custom Code box option on the left:
.sh-header .sh-nav > .current_page_item > a, .sh-header .sh-nav > .current-menu-ancestor > a, .sh-header-left-side .sh-nav > .current_page_item > a {
color: #ec176e !important;
}But it also seems that ALL of the color option boxes don’t always work consistently? Some seem to be working and others no? I’ve reset them all and gone back with new colors, and still some seem to work and other not? There’s no rhyme or reason to it?
Sorry, for example, another problem…
The navigation all show at the top when on the home page. But when I scroll down and the navigation “sticks” to the top, two of the navigation words (Buy and Blog) seem to “white out” (see attached screenshot)…why, and how do I fix this?
Thanks!
Sorry, here are the screenshots again:
For some reason, it’s not letting me upload the screenshots…
You can see what I mean on my website: http://www.danataft.com/yoga/
It seems this is happening due to some CSS conflict on your site.
To change all your navigation links to pink color add the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
#page-container .sh-header .sh-nav > li.menu-item > a{ color: #ec176e !important; }Thank you. I used the CSS Code you gave above, and it worked for the pink…but the “white out” is still happening on those two?
I visited your shared site but didn’t see provided CSS code anywhere in the page or child theme style.css file.
Where have you added it?
Hi there. I put it in the Theme Settings -> CSS Code area. I’m not sure why, but I took it out, and then replaced it in the same area again, and now it is working!
However, it isn’t allowing my rollover colors to work now?
So, just to make sure I’m being clear (forgive me if I have not been prior), on the homepage, I would like the main navigation (since it has a “transparent” background) to be white text, and then upon rollover, to be pink. And then when I scroll down on the front page, as the navigation “sticks” to the stop, it’s navigation background becomes white, so then I want the navigation text to be pink, and then upon rollover, to be black. Does this make sense? I’m attaching screenshots:
Solution for this topic
To achieve this instead of above shared CSS code please use the below custom CSS code.
#page-container .sh-header .sh-nav > li.menu-item > a{ color: #fff !important; } #page-container .sh-header.sh-sticky-header-active .sh-nav > li.menu-item > a, #page-container .sh-header .sh-nav > li.menu-item > a:hover{ color: #ec176e !important; } #page-container .sh-header.sh-sticky-header-active .sh-nav > li.menu-item > a:hover{ color: #000 !important; }This worked beautifully, thank you!
You are most welcome here 🙂
