Make the Menu bar wording darker

Hey. Firstly, you would need to create a child theme or install a custom CSS plugin. In your child theme’s style.css file or custom CSS plugin’s editor, you would need to use the following CSS snippet:

.main-navigation a {
color: COLOURVALUE;
}

COLOURVALUE should be replaced by the hex colour code that corresponds to the colour you wish the text in your menu to be. A listing of hex colour codes can be found here: https://html-color-codes.com/.

I tried this, see below. But doesn’t seem to be working.

/* =Imports styles from the parent theme
————————————————————– */
@import url(‘../spun/style.css’);

/* =Theme customization starts here
————————————————————– */

.main-navigation a {
color: #666666;
}

Sorry, just realised that this is being caused by the low opacity value being set in the CSS. The snippet you’ll need to override this is:

#masthead {
opacity: 1;
}

You’ll then be able to change the colour for .main-navigation as you wish.

Sorry I don’t really get what you means yet.
There are 3 parts in the main-navigation that I can change the color code.
May I know which part is the default setting (once loading), and which part is the color setting once mouse hover over?

Really appreciate your kind support.

PART 1
——
.main-navigation {
color: #999;
display: block;
float: right;
font-family: Quicksand, Helvetica, Arial, sans-serif;
-webkit-text-stroke: .35px; /* Hack to fix thin text in Windows */
font-size: 14px;
font-size: 1.4rem;
margin: 5px 0 0;
position: relative;
text-align: right;
text-transform: uppercase;
width: 60%;
}

PART 2
——
.main-navigation a {
color: #999;
display: block;
text-decoration: none;
}

PART 3
——
.main-navigation ul ul .parent > a:after {
color: #999;
content: ” ? “;
display: inline-block;
margin: 0 0 0 .5em;
}

Chewhow:

I understand your frustration, as I was having the same problem viewing the text through firefox etc, as it was too light.

The color of the text is not the problem, it is actually a dark grey at it’s source.

The opacity of the text is the problem. It causes the dark grey text to become very light.

Follow Siobhan’s advice posted above, and in your css plugin add the lines:

#masthead {
opacity: 1;
}

The opacity range is between 0 and 1. Set it to 1 and it will be a regular string of text with a dark grey color. You can also follow the above advice to change the color if you wish, but I believe the opacity is the source of your frustration. Anywhere in the CSS code you have an opacity you can set it to 1 and it will solve your problem.

I understand the theme creator having a opacity set like it is, but for some of our pages that element just goes too far. Good luck!

Hi Strizzle

Thanks for the reply.
I miss out to talk about the header in my earlier reply.

Actually I have changed the Header opacity using advice from Siobhan below. It improved, as you can see on my header (top-left).

#masthead {
opacity: 1;
}

But somehow, the Menu bar (top-right) opacity is not affected by this #masthead.
Therefore, I am looking into the .main-navigation.
I tried to change the color code. Doesn’t seem to help.
Most likely I am not changing the correct part of the codes.

May be you can help on this ??

Btw I was going to help but right click was disabled

Hi Andrew

opsss, here you go, try again.
https://www.chewhow.com

I can’t see this:

#masthead {
opacity: 1;
}

In your Child Theme style.css file

Hi Andrew

I am not sure how the css should appear.
Even the original template source file, I can’t see the opacity setting.

view-source:https://spun-demo.calobeedoodles.com/

You can view the css file here:
https://www.chewhow.com/wp-content/themes/spun-child/style.css

Hello Chewhow,

Be advised I am still a newbie at CSS as well. However, I checked your child theme style.css you linked above and I do see the masthead opacity has been changed to 1.

If you search the .main-navigation area, I see another opacity value set to 0. I’m not sure if this is the value you should change, I suspect it is, but I would alter this section to have the opacity set to 1 like below:

.main-navigation ul ul {
	float: left;
	opacity: 1;
	position: absolute;
		top: 1.6em;
		left: 0;
	text-align: left;
	transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	visibility: hidden;
	z-index: 99999;
}

I would be interested to see if this fixes your issue.

By the way your site looks fine and does not have the light color text when I view it currently, although I’m sure I’m on a different browser/system than you.

i am using firefox n chrome.

tried your suggestion, still the same ??

Try clearing your cache.

Well, may be I was wrong. The Menu bar font color opacity did change but in minor scale due to its FONT.

I increased code below to a higher number and it seems clearer now:

-webkit-text-stroke: .75px;

??

Hello,

I read this thread with great interest because I just built a site with Spun and I, too, want to change the opacity value. However, when I try to access my theme directory to create a child theme, I get a blank screen. No error message, mind you — just a blank page. I am entering https://us-iran-relations.com/wordpress/wp-content/themes/ The instructions seemed straight-forward enough. Alas…could someone involved in this thread please help me get started? Thank you!