[Resolved] change fill color of SVG icon in secondary menu

[Halil]

Hi,
I’ve created a secondary menu and used SVG images in that menu, showing that menu in the upper right corner.

I’m trying to add little animation and changing the fill color of that SVGs but I couldnt do it.

For example, to change the fill color, I’ve used this code

.menu-item ._svg:hover {
   fill: #111;
   background-color:red;
}

I’ve added background color just to check I’m referencing the correct element. Background color works, fill color does not work!

I also want to add little animation with a nice transition to that SVG icon, such as making it a little bit bigger when I hover over it.

Could you pls help with the css

[Ying]

Hi Halil,

The svg will inherits the hover color set to the menu items, you can set that color in customizer > colors.
So the CSS is not needed.

But if you only want the hover color for the svg, not other menu items, you can try this CSS:

/*add hover color to svg*/
.main-navigation .main-nav ul li.menu-item-14197:hover a {
    color: red;
}
/*add hover effect to enlarge svg*/
.main-navigation .main-nav ul li.menu-item-14197:hover a svg {
    transform: scale(1.5);
}
/*add transition to svg*/
.main-navigation .main-nav ul li.menu-item-14197 a svg {
    transition: all 0.2s ease;
}

[Halil]

thanks for the quick response Ying but neither hover settings in color customizer, nor this css works.

Colom customizer changes the hover color links, not the SVGs.

[Ying]

I’m not seeing the CSS on your site, it should work:
https://www.screencast.com/t/uu2RIqFoaknJ

Can you make sure cache is cleared?

[Halil]

I mean the links / SVGs on the upper right sections Ying, not the home icon, sorry for misleading you
here is the link to SVGs https://ibb.co/bHxx5zK

[Ying]

Ah sorry for the misunderstanding.

The icons in the secondary navigation are added using different method?

CSS won’t work as they are inserted as static image.

Can you insert them using the same method that the home icon is using?

[Halil]

yes, via plugin! I see the problem now! I have changed the URL, pls check the link in the private area.

Could you pls help me again make this SVGs, aligned well with the link (padding etc), vertically middle, on hover a little bit bigger look with nice animation?

I’ve a lot to learn about these things, so frustrating for a novice user like me !

[Ying]

Try this CSS :

.secondary-navigation .main-nav ul li a svg {
    transition: all 0.2s ease;
    margin-right: 10px;
}
.secondary-navigation .main-nav ul li:hover a svg {
    transform: scale(1.5);
}
.secondary-navigation .main-nav ul li a {
    line-height: 1em;
    display: flex;
}

[Halil]

almost perfect,
I’ve added these

.secondary-navigation .main-nav ul li a svg {
    transition: all 0.2s ease;
	  margin-right: 5px;
	  vertical-align: middle;
}

but the vertical align is not perfect! may be it’s because the initial size of the SVGs are a bit small, how do I increase the inital size of SVGs?

[Ying]

Have you added the 3rd CSS in my reply?
https://generatepress.com/forums/topic/change-fill-color-of-svg-icon-in-secondary-menu/#post-2224634

[Halil]

yes, I’ve added now, can we make the initial size of SVGs just a little bit larger?

I tried font size settigns, but it changes only the font size of the text links.

[Ying]

It’s because your SVG is using fixed height and width instead of viewBox.

You can use a tool like this to convert the SVG to use viewBox, toggle the Prefer viewBox to width/height option. https://jakearchibald.github.io/svgomg/

Then you should be able to use:

.secondary-navigation .main-nav ul li a svg {
    height: 25px;
    width: 25px;
}

Or

You can directedly edit the SVG code, change its width and height.

[Halil]

huge thanks Ying

[Ying]

No problem 🙂

[Author]

Posts