How to change the Top Bar /Menu text color

1) With this custom css:

#nav-topbar .nav li a { color: red; }
#nav-topbar .nav li > a:hover,
#nav-topbar .nav li:hover > a,
#nav-topbar .nav li.current_page_item > a,
#nav-topbar .nav li.current-menu-item > a,
#nav-topbar .nav li.current-menu-ancestor > a,
#nav-topbar .nav li.current-post-parent > a { color: blue; }

2) With this custom css you change background of the header menu:

#nav-header.nav-container { background-color: red; }
@media only screen and (min-width: 720px) {
	#nav-header .nav ul { background-color: red; }
}

With this custom css you change the text color of the menu:

#nav-header .nav li a { color: red; }
#nav-header .nav li > a:hover,
#nav-header .nav li:hover > a,
#nav-header .nav li.current_page_item > a,
#nav-header .nav li.current-menu-item > a,
#nav-header .nav li.current-menu-ancestor > a,
#nav-header .nav li.current-post-parent > a { color: blue; }

Hi
I tried to paste the code in style.css is not working, visit here https://www.mpe.ac.tz. please help?

what can I do now, can I give you my login details to help me? please email me your email

thanks

please help;

I would like to:

1. change the topbar menu background and text color ( background be yellow and the text color be #002147
2. change the header menu background and text color ( background be yellow and text color be #002147

please help

well done!

Hi Alexander. I am having the same problem as tossytm. I want to change the text color for the header navigation bar on the Hueman theme. (Great work by the way.) Right now it’s white on white. I’m not sure where to enter the above script on the custom css to change the color. Any directions would be appreciated. (Site:https://soulcenteredhealing.net/wptest/)

hi,

Alexander Agnarson gave the codes to change the font color in the menus, I tried and it works.

/* Navigation */
#nav-topbar .nav li a { color:#000; }
#nav-topbar .nav li > a:hover,
#nav-topbar .nav li:hover > a,
#nav-topbar .nav li.current_page_item > a,
#nav-topbar .nav li.current-menu-item > a,
#nav-topbar .nav li.current-menu-ancestor > a,
#nav-topbar .nav li.current-post-parent > a { color:#000; }

#nav-header .nav li a { color:#000; }
#nav-header .nav li > a:hover,
#nav-header .nav li:hover > a,
#nav-header .nav li.current_page_item > a,
#nav-header .nav li.current-menu-item > a,
#nav-header .nav li.current-menu-ancestor > a,
#nav-header .nav li.current-post-parent > a { color:#000; }

To change the background it is in the theme options -> Styling.
Shame that Alexander Agnarson has no option to change the theme color in the menus.

For Beefstick: I hope this brings this thread to the top of the forum, as it contains the information a number of us have been struggling with. I am using Alex’s custom css in my child theme, but it has not been working.

Are there things we need to be inserting in this code (like color names/numbers) that is just not intuitive to those of use who are new to website construction?

For example, here’s the original from Alex:

#nav-header .nav li a { color: red; }
#nav-header .nav li > a:hover,
#nav-header .nav li:hover > a,
#nav-header .nav li.current_page_item > a,
#nav-header .nav li.current-menu-item > a,
#nav-header .nav li.current-menu-ancestor > a,
#nav-header .nav li.current-post-parent > a { color: blue; }

Should I alter it like this?

#nav-header .nav li a { color: red; }
#nav-header .nav li > a:hover { color: green; },
#nav-header .nav li:hover > a,
#nav-header .nav li.current_page_item > a:active { color: purple; },
#nav-header .nav li.current-menu-item > a,
#nav-header .nav li.current-menu-ancestor > a,
#nav-header .nav li.current-post-parent > a { color: blue; }

It’s not as clear cut as my previous theme’s child stylesheet where all I had to add was:

a {color:#3B8DBD;}
a:hover {color:#8C2183;}
a:active {color:#205C1E;}

hi,

you started the style.css of the child theme like that?

/*
	Theme Name: Arnouville Passe
	Author: noaneo
	Template: hueman

*/

@import url("../hueman/style.css");

/* ------------------------------------------------------------------------- *
 *  Theme customization starts here
/* ------------------------------------------------------------------------- */

/* Global */
.mystyle {}

/* Tablet - 800px, 768px & 720px */
@media only screen and (min-width: 720px) and (max-width: 800px) {
.s2-expand .s2 { background:none; background-color: #FFF; }
}

/* Mobile - 480px & 320px */
@media only screen and (max-width: 719px) {
.s1-expand .s1 { background:none; background-color: #FFF; }
}

/* Mobile - 320px */
@media only screen and (max-width: 479px) {
.sidebar { background:none; background-color: #FFF; }
}

/* Customisation */

For red and green is good but purple and green, no, I’ve tested, not good.

Menu active

#nav-header .nav li > a:hover, #nav-header .nav li:hover > a, #nav-header .nav li.current_page_item > a, #nav-header .nav li.current-menu-item > a, #nav-header .nav li.current-menu-ancestor > a, #nav-header .nav li.current-post-parent > a {
    color: blue;
}

@noaneo: Thanks for getting back to me! The use of the words “red, green, purple, etc” were for examples only. I normally use hexcode numbers. I was following Alexander’s lead. He used the basic color name, so I followed suit. It doesn’t surprise me that purple wouldn’t work, but I sort of thought green might. lol

Since I normally use numbers, I should have in my example. I just couldn’t tell from his list of code exactly where I should put the color ID’s and how to identify them (specifically, for active, current, visited, etc.)

I’ll post my style.css in the next box, and show you where I inserted the color info.

@noaneo: Everything in all caps will be notes to you:

/*
	Theme Name: Hueman Child - DGLauren
	Theme URI: https://alxmedia.se/themes/hueman/
	Description: Sample child theme for customization.
	Author: DGLauren
	Author URI:
	Template: hueman
	Version: 1.0.0
*/

@import url("../hueman/style.css");

/* ---------------------------------------------------------
   Theme customization starts here
  ---------------------------------------------------------- */

RIGHT HERE IS WHERE I STARTED ADDING IN MY ALTERATIONS. 

I PASTED ALEXANDER'S CODE IN, THEN CHANGED IT TO REFLECT WHAT I WANTED
 IT TO BE, BUT I DIDN'T UNDERSTAND HOW TO ALTER IT AND IT DIDN'T WORK.
 (EXAMPLES OF HOW I CHANGED IT WOULD BE #d4117f INSTEAD OF "RED" AND
#3258d6 INSTEAD OF BLUE.) THE FOLLOWING IS AN ACTUAL CUSTOM CODE THAT'S
 IN MY FILE.

(I REMOVED ALL THE ATTEMPTS TO CHANGE MY LINK COLORS THAT DIDN'T WORK.)

#nav-header.nav-container {box-shadow: none;}

/* ---------------------------------------------
Next up: Removing the automatic Hueman page titles.
THIS WAS BECAUSE MY PAGES ALREADY HAD TITLES SHOWING.
----------------------------------------------*/

.page-title { display:none;}

/* ------------------------------------------
Everything below this line was in this stylesheet
before I added anything.
--------------------------------------------*/

/* Global */
.mystyle {}

/* Tablet - 800px, 768px & 720px */
@media only screen and (min-width: 720px) and (max-width: 800px) {
	.mystyle {}
}

/* Mobile - 480px & 320px */
@media only screen and (max-width: 719px) {
	.mystyle {}
}

/* Mobile - 320px */
@media only screen and (max-width: 479px) {
	.mystyle {}
}

@noaneo: Thank you!!! You helped me finally get something to work. I put my chosen hexcode number into the string of code you gave me and now my menu text (when hovered over) shows up the same color as the active page: #019fde.

My background is white and the inactive menu text is white, so you can’t even tell there is a menu unless you mouse over where you’d guess a menu would be. Could you also give me a code for the regular menu text?

I’m stoked! I’ve been struggling with this for days.

@dg this might work for you,

#nav-topbar .nav li a {
color: #247db5;
}

or, depending on what menu you are using,

#nav-header .nav li a {
color: #247db5;
}

and of course you can use whatever color you want.

hi,
the address of your site, we can have?

In style.css

there are unnecessary lines

/ *
Theme Name: Hueman Child - DGLauren
Theme URI: https://alxmedia.se/themes/hueman/
Description: Sample child theme for customization.
Author: DGLauren
Author URI:
Template: HUEman
Version: 1.0.0
* /

line necessary

/ *
Theme Name: Hueman Child
Author: DGLauren
Template: hueman

* /
@import url("../hueman/style.css");

then this first

/* ------------------------------------------------------------------------- *
 *  Theme customization starts here
/* ------------------------------------------------------------------------- */

/* Global */
.mystyle {}

/* Tablet - 800px, 768px & 720px */
@media only screen and (min-width: 720px) and (max-width: 800px) {
.s2-expand .s2 { background:none; background-color: #FFF; }
}

/* Mobile - 480px & 320px */
@media only screen and (max-width: 719px) {
.s1-expand .s1 { background:none; background-color: #FFF; }
}

/* Mobile - 320px */
@media only screen and (max-width: 479px) {
.sidebar { background:none; background-color: #FFF; }
}

/* Customisation */

Only after you put your custom code

#nav-header.nav-container {box-shadow: none;}
.page-title { display:none;}