Change menu highlight background color

Without doing the custom css override. Where have you built in changing the menu text. Or is it necessary to go into the css files and replace there. Same question for menu location. I wish to push it down to just above the animation.

Hi,

It can be changed with some Custom CSS, so please let me know exactly how you want to change it and post a link to your website, so I can give you the Custom CSS to change the way you want it.

Best Regards,
Csaba

I want to change the top menu highlight and drop down color backgrounds.

Hi,

Please try this Custom CSS:

.main-navigation a:hover {
    color: red !important;
}

.main-navigation ul ul {
    background-color: red !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

I hope it’s OK I add a question here, it’s about the same issue:
I used that CSS and changed the background, but would now like the texts to change as well. (I would like the texts to be dark grey, or dark red).

Heatherita…me too. good question

Well, after some searching, this is what I did (and it’s working!)

I created a new style for the dropdown menu, named it “dropdown”):

/* dropdown menu */

 .dropdown a:link {
    color: #333333 !important;
}
.dropdown a:visited {
    color: #333333 !important;
}
.dropdown a:hover {
    color: #5a0620 !important;
}
.dropdown a:active {
    color: #5a0620 !important;
}

Then, in the wordpress dashboard, go to MENUS and add to each menu item the CSS name
(in the box below the Navigation label that says “CSS Classes (Optional)”

this might help: http://sevenspark.com/how-to/how-to-add-a-custom-class-to-a-wordpress-menu-item

Cabsa, that did the trick. That for helping me find the reference.

To Heartherita…After Cabsa’s answer, I found the references to the menu in style.css. You can look there to find everything. Look for “.main-navigation”. That is the whole thing. You can either change it there…or do this Custom CSS solution to over-ride the primary descriptors.

Add the following to change the text color of the main menu (primary) by adding this, where “color” is the text color. Use either the color code (like #1e73be or name of color like “white”:

.main-navigation a:hover {
color: black !important;
}

Heatherita That is cool…THANKS!

Yes, I had found the .main-navigation… but it would change the top menu and dropdowns equally… and since I have the top on a dark background, and dropdowns are white background… that’s why this other solution has worked for me :slight_smile:

Had a similar problem, so I broke up the coupling of the main menu and secondary menu to handle. In my case the dark background worked for both…however I am presently looking how to detect mobile (another subject) so that the secondary menu is NOT displayed. Looks awful on ipads and iphones when that secondary side menu is on, but ok on the computers. Does require the change of header.php.

Looks like I am going to end up changing code and theme features for myself…LOL

try playing with the “display:none” for the different media screens? just my first thought!

Hi,

Sorry, this is becoming a bit confusing, please clarify what you want to achieve, so I can give you the Custom CSS for that.

Best Regards,
Csaba

Hello,

I’ve tried adding the custom CSS to the Simple Custom CSS plugin to change the highlight color of my menu but nothing seems to happen?

Here’s the website I’m working on: http://qfit4life.com/

Appreciate the help!

Rachel

Hi,

Can you, please here the Custom CSS you use and also, please let me know what do you mean by highlight? If you meant the current menu item color, then you can change that with this Custom CSS:

.current-menu-item a {
    color: red !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba,

Thanks for getting back to mean. I’m referring to the color of the menu item when you run your mouse over it, it changes colors.

This is the custom CSS I used in the Simple Custom CSS plugin but nothing happened:
.main-navigation a:hover {
color: black !important;
}

I just tried adding it to the Additional CSS section and still no changes…

I appreciate your help.

Best,
Rachel

Hi,

Ok, you can change the hover color with this Custom CSS:

#mainnav ul li a:hover {
    color: blue !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Best Regards,
Csaba

That worked! Thank you very much for your help.

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba