Change header text colors

Hello marco2dii,

Please share the site url so we can provide you the custom css as per the need.

I’ll await your reply to assist further.

Kind Regards,

Manoj

Hello,

This is the site’s url https://et-risk.eu/

The issue happens when clicking in one of the sub menus, the main menu text turns dark grey and I cant change it

Thanks so much!

Hello,

Any clues on this?

Cheers

That’s not header colors. It’s the menu.

Here’s my code. You can start with it and tweak it from there if it works for you. What’s here are my own colors.
[To find the CSS you need, I recommend Firefox. In the menus: Tools->Web Developer->Inspector.]

/* MAIN MENU */
.navbar .nav > li > a {
color: #006666; 
} 

.navbar .nav > li > a:hover {
color: #887721;
text-decoration: underline;
}

/*This is the menu's sub item*/
.dropdown-menu > li > a {
color: #006666;
text-decoration: underline;
} 

.dropdown-menu > li >  a:hover  {
color: #887721;
text-decoration: underline;
}

The blurry is the white shadow. I can’t recall if we need CSS to remove it.
Try adding this:

text-shadow: none

Hello debshadovitz,

Thanks so much for the reply, I tried your code but I still can’t change what I need to modify. In the picture below, the gray color that is enabled after I click on a sub-menu or on another menu item remains the same.

In the picture below, your color shows well in the rest, but not in the word “about” please see the picture below.

<

Many thanks

• This reply was modified 7 years, 9 months ago by marco2dii.

Oh! I don’t allow for a visited link! Add this but change the color.

.navbar .nav > li > a:visited {
color: #887721;
text-decoration: underline;
}

And for the submenu add:
.dropdown-menu > li >  a:visited  {
color: #887721;
text-decoration: underline;

Add the visited grouping before the hover grouping.

Thanks again, unfortunately the problem persists.

I used the code, but the “visited” color doesn’t change. I tried setting “hover” color as none, to see if “visited” color will show. This gray color, seems to be an underneath color for all text, which is defaulted in dark grey and its staying.

(Also dropdown menu color, set in pink is not changing)

See code below:

/* MAIN MENU */
.navbar .nav > li > a {
color: white;
text-shadow: none
}

.navbar .nav > li > a:visited {
color: blue;
text-decoration: none;
text-shadow: none
}

/*And for the submenu add:*/
.dropdown-menu > li > a:visited {
color: red;
text-decoration: none;
}

.navbar .nav > li > a:hover {
color: none;
}

/*This is the menu’s sub item*/
.dropdown-menu > li > a {
color: pink;
text-decoration: none;
}

Thanks!

The gray you are seeing is from Customizr’s Customize area: Font Customizer->Header. For me, my CSS overrides it.
You don’t actually have to use your own CSS. Use that area Customizr gives you. (Only I can’t recall if it’s only part of Pro.)

I’d question that you have the Child Theme set up properly but my blue and gold did appear for you so we know your CSS is being seen.

I’m sorry but I’m at a loss from here due to my lack of time. I’d thought this was easy as my CSS works for me on 5 sites. Let’s hope Rocco or Denzel can troubleshoot for you.

Thanks so much for your time and advice

I managed to solve the issue following your comment on inspecting the code, the ID for that specific color is something else. The following code overrides that gray:

.tc-regular-menu .navbar .nav > li.current-menu-ancestor > a {
color: pink;
}

Best!

Fantastic!!!

That code inspector will be your best friend as you customize a WordPress site.

I’m so happy that I was able to help.
Be sure to mark this a closed. (It’s a check box below.)