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

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

Home Forums Support Adding image to nav. menu and my account icon

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #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!

    #746825
    David
    Staff
    Customer Support

    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.

    #747932
    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 ?

    #747956
    David
    Staff
    Customer Support

    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

    #748163
    Karlis

    Thank you very much)

    #748195
    David
    Staff
    Customer Support

    Glad to be of help 🙂

    #972042
    David

    Hi David

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

    Water Leak DetectionWater Leak Detection

    http://185.20.51.60/~envirotechalarms/

    Thanks
    Dave

    #972045
    David
    Staff
    Customer Support

    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.

    #972098
    David

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

    #972321
    David
    Staff
    Customer Support

    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.

    #972819
    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/

    #972821
    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/

    #972916
    David
    Staff
    Customer Support

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

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

    That’s great – Thanks David!

    #972962
    David
    Staff
    Customer Support

    Glad to be of help

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.