Add this to your child theme stylesheet or custom CSS plugin:
.menu-top .top-navigation .horisontal-navigation li a {
color: #999;
}
That should darken it up for you and you can adjust the color value even more if necessary.
Hi sdavis2702,
I followed this discussion and fitted in the code you gave, but it does not seem to work.
This is what I did:
I made some changes in de CSS-stylesheet, but in doing so I managed to change the color of font in main top menubar. It is now purple on a light grey backgrond in stead of light grey letters in a white background. I switched the background color in Customizer to default, so I do understand that, but how can I change the menu items back in another color?
Also I would like to change the link-visit colors to something else then purple or blue.
I can send you a screen shot from the part of the stylesheet where I made the changes.
Thanks, Franka
Hi sdavis,
I also got the issue, that I cannot change the top menu item link colors. They are white, and with a black hover background.
This is the source code from my page, where I’d like to adjust the colors (link color, link-hover color)
<div class=”menu-top”>
<!– First Top Menu –>
<div class=”nav-container top-1-navigation”>
<nav class=”horisontal-navigation menu-1″ role=”navigation”>
<span class=”toggle”><span class=”menu-toggle”></span></span>
<div class=”menu-menu-container”><ul id=”menu-menu” class=”nav-horizontal”><li id=”menu-item-155″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-155″>Über mich
<li id=”menu-item-151″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-151″>…
the code part above seems not to work.
thank you
Nicolas
Hi dgttm,
I solved this problem by doing this:
Look in your CSS stylesheet for /* Navigation */
and then for:
.horisontal-navigation > div > ul > li a, .horisontal-navigation a {
color: grey;
padding: 0px 20px;
}
I filled in grey, but you can fill in any color you want I guess.
Hi Franka,
thanks a lot, that’ it 🙂
and one more question:
Is it possible to set the opacity of (static) pages? currently its flat white without any opacity.
thank you!!
nicolas
I don’t know that one, I’m sorry 😉
You can change the background of your pages, I turned it light grey in stead of flat white.
But changing the opacity of pages, I would not know if that is possible.
ok, thanks.. can you tell, where you change the color? cannot find it..
thankx a lot
Nicolas
In customizer, on the left, you see Colors -> background color.
hm – thats just affecting my starting page color, perhaps also blog.. but I use static pages and this background stays white..
just to be clear, you mean:
Customize -> Customize Colors -> (in the top part named Color) Background Color ?
That’s how I did it and it worked on all my pages.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
but I use static pages and this background stays white..
dgttm, Can you link the pages with the issue?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Oh wait, I just realised that you’re not the person who created this thread (and that person has yet to answer).
Please open a new thread here: https://wordpress.org/support/theme/stained-glass#postform
Hi,
I’m almost giving up! Not really but I struggle with the color of the text on the top menu where I have a drop down list. The menu is white, and that’s fine, but the text is so light that you can only see it, when you hover over it with the mouse. I have tried the above mentioned method in my style.css:
.horisontal-navigation > div > ul > li a, .horisontal-navigation a {
color: grey;
padding: 0px 20px;
And instead of color:grey; I have tried #5F5F5F but the text is still very light.
Can anyone please help me with this?
Hi Friis-Holst,
Try adding this:
.top-navigation .horisontal-navigation li a {
color: #666666;
}
.top-navigation .horisontal-navigation li ul li a {
color: #666666;
}
.top-navigation .horisontal-navigation li a:hover,
.top-navigation .horisontal-navigation li a:focus {
background: #999999;
color: #ffffff;
}
.top-navigation .horisontal-navigation li ul li a:hover,x
.horisontal-navigation li ul li a:focus {
background-color: #999999;
color: #ffffff;
}
.top-navigation .horisontal-navigation .current-menu-ancestor a:before,
.top-navigation .horisontal-navigation .current_page_item a:before,
.top-navigation .horisontal-navigation .current_page_ancestor a:before,
.top-navigation .horisontal-navigation .current-menu-item a:before {
color: grey;
}
.top-navigation .horisontal-navigation li ul {
background-color: #cccccc;
}
It worked for me. After the update of the Stained Glass theme I had to do this again, so I’m now working from a child-theme as I should have done from the beginning and yesterday I managed to get it right. I’m using al sorts of grey-shades, but of course you can insert whatever color you need.
hi, if you can’t get result with selectors you can always use !important:
.horisontal-navigation a {
color: #333 !important;
}
