Change Icon Color

HTML & CSS
1

I cannot figure this out!

I need to change the color of the icons next to the main menu list items. They are currently blue (#0282ca) and I need them to change to white on the hover state or when they are the currently selected menu item.

I believe the problem is that I had to add the “!important” rule to get these icons to turn blue in the first place.

LINK-

2

So the answer is in why you had to resort to using !important.
The element has in-line styling telling it to be white. In-line styles are hard to override, only important will do it. The best thing is to just not have in-line styles, assuming you are able to edit the html.
The next problem is the element has another css selector telling it to be white and that selector includes an id which will also be difficult to override due the the huge specificity weight of IDs in selectors.

2 Likes
3

I don’t believe I will have the ability to directly remove the inline style. It is written using part of a WordPress theme. I will look in the PHP to see if it would be easy to locate…

4

Is there a way we can see the work live?

6

I’m sure you will find it. But it’s not recommended to edit the theme files as the changes will go away at the next theme update.

The reliable way to adjust a theme is to create a child theme that will change the parent theme: https://codex.wordpress.org/Child_Themes

If you can’t locate the inline style in the theme php, please link to the page if you want assistance.
Edit) Sorry, I missed the posted link.

7

Yes. The link was posted in the original thread. http://www.sfgmedicare.com

8

The icon is not located in the theme php, it’s a css pseudo element. It’s color is inherited and you can use css to change it on hover.

Try just add this rule to your child-theme’s style.css:

#menu-main-menu-jt:hover .icon-home::before {
     color: white;
}
2 Likes
9

Looks like a good answer from @Erik_J there but it may be worth considering using a Child Theme in the future, if you not familiar with a child theme then this normally contains just a few files like your style.css and your functions.php in some cases, your logo perhaps also… Doing this will mean you never mess about with your core theme files, some themes bundle a child theme with the main theme so you never actually touch the originals… I should point out also that many themes have an area where you can insert what’s called Custom CSS, this works in the same sort of way…

10

@Erik_J This kind of works. Now when I hover anywhere over the entire main menu, all of the icons turn white. Even the ones without the orange background. Take a look…

11

Sorry! Of course! :biggrin:

Then you must find what child in the menu to move the hover state to in order to target only one item. Try e.g.:

.menu-item:hover .icon-home::before {
     color: white;
}

Add the menu parent ID part of the selector again if necessary.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.