- This topic has 14 replies, 3 voices, and was last updated 5 years, 8 months ago by
David.
-
AuthorPosts
-
December 3, 2018 at 2:08 am #746519
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!
December 3, 2018 at 7:34 am #746825David
StaffCustomer SupportHi 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.
December 4, 2018 at 8:47 am #747932Karlis
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 ?
December 4, 2018 at 9:26 am #747956David
StaffCustomer SupportSo:
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.comDecember 4, 2018 at 2:02 pm #748163Karlis
Thank you very much)
December 4, 2018 at 2:40 pm #748195David
StaffCustomer SupportGlad to be of help 🙂
July 31, 2019 at 6:26 am #972042David
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
DaveJuly 31, 2019 at 6:32 am #972045David
StaffCustomer SupportHi 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.
July 31, 2019 at 7:31 am #972098David
Thanks David, is there anyway I can swap the image src depending on if it’s active or not?
July 31, 2019 at 9:17 am #972321David
StaffCustomer SupportIt 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.
August 1, 2019 at 3:04 am #972819David
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?
August 1, 2019 at 3:11 am #972821David
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?
August 1, 2019 at 6:22 am #972916David
StaffCustomer SupportIn the CSS you have to display the triangle add these properties:
position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
August 1, 2019 at 6:30 am #972922David
That’s great – Thanks David!
August 1, 2019 at 7:14 am #972962David
StaffCustomer SupportGlad to be of help
-
AuthorPosts
- You must be logged in to reply to this topic.