[Support request] Adding image to nav. menu and my account icon

[Karlis]

Hi, Is it possible to add image to primary or secondary menu icon 150 x 150 px ? Something similar to mega menu plugin.
Is it a good idea for loading speed? 1 image PNG weight is about 30 Kb, and I will have 10 of them.

And how can I add a my account icon next to basket and search icon ?

Thanks!

[David]

Hi there,

this article explains how to add icons to menus:

https://docs.generatepress.com/article/adding-icons-to-menu-items/

the only difference being is you would use this html instead:

<img src="url_to_png.png" alt="Alt name of icon" height="42" width="42">

The same can be done for the my account just add the correct URL for it to the menu item.

Adding 300kb of icons wouldn’t be good for performance, you should be able to compress those PNGs to much smaller sizes. Generally around 1kb for mono icons.

[Karlis]

Not clear your answer or maybe my english is not so good.
I was asking for image no icons.
Where I need to paste that code?

” The same can be done for the my account just add the correct URL for it to the menu item. ” From where this comes from? I don’t understand you.

P.s. I was saying 30 kb not 300 kb. Anyway, can you recommend to me an image compression program ?

[David]

So:

1. Go to Appearance > Menu
2. Add a custom link
3. In the Navigation Label field add the HTML:
<img src="url_to_png.png" alt="Alt name of icon" height="42" width="42">
4. Add the URL for the page you want it to link to.

This applies for any page you want to link to including the my-account page.

For the file size, it is best to save the original image at a smaller size. Usually i would go for double the size i need. ie.
If i want to display the image at 40px x 40px then i would create and upload an image that is 80px x 80px.

If you don’t have loads of images then maybe this service for compression:
https://tinypng.com

[Karlis]

Thank you very much)

[David]

Glad to be of help 🙂

[David]

Hi David

How can I change the colour of a SVG icon when active in a menu? I have this…

Water Leak Detection

http://185.20.51.60/~envirotechalarms/

Thanks
Dave

[David]

Hi there,

you cannot change the color ( styles ) of an SVG image file using CSS. The image would have to be added as an inline SVG then you can use the fill property.

[David]

Thanks David, is there anyway I can swap the image src depending on if it’s active or not?

[David]

It looks like you have that working by using a background image – do you intend to change it so an <img> is being displayed instead of a background?

If so then it would be a case of adding both images to the menu item, each with a separate CSS class – one for standard and one for current and then use CSS to hide one or the other.

[David]

Thanks Mark, yea the background images seems to work fine.

Any ideas how I can get the arrow to sit at the bottom and in the center when the page is selected?

http://185.20.51.60/~envirotechalarms/

[David]

Thanks David, yea the background images seems to work fine.

Any ideas how I can get the red arrow to sit at the bottom and in the center when the page is selected?

http://185.20.51.60/~envirotechalarms/

[David]

In the CSS you have to display the triangle add these properties:

position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);

[David]

That’s great – Thanks David!

[David]

Glad to be of help

[Author]

Posts