Add "Icon" to Non-Category Menu Item on "Browse Categories" Sidebar.

Hello

I know that we are able to add an icon to the categories that then are visible on the sidebar (“Browse Categories”)… However, I am wondering if you can explain how to add an icon to a NON-CATEGORY menu item.

Please check the private information.

ALTERENATIVELY: If that is not possible… can we create a “Hidden Category” that is not visible in shop at all, but can be used in menu (to open megamenu) to have icon.

Essentially, we want to have a menu item on the sidebar that is only used to open a megamenu on the sidebar… but that also has an icon (so it matches the design of the category mega menus)

Hello,

The menu item has a field for Fotnawesome icon https://prnt.sc/11jcpta

You can find more details here: https://xtemos.com/docs/woodmart/create-menu-2/

If you mean custom (image icons) you will need to add the class to each menu item and then add the images with custom CSS.

As for the categories, please read and find all the option here: https://xtemos.com/docs/woodmart/product-category-menu/

If you have any questions please feel free to contact us.

Best Regards

Thank you for replying so quickly!

If you don’t mind, can you tell me the css code to use to add an image?

Also if you don’t mind, can you tell me the CSS to use to modify the color of one of the menu sections as well? Just the structure to make it any color so I can use to to build the CSS

Thank you!

Ps- how do I leave a 5 star review for you? Support has been amazing and so patient!

Hello,

Please assign a class to a menu item and provide the correct site URL as well as image URL, I will provide custom CSS and you will use it for all where you want to change the image.

Best Regards

I am not sure how to add a class… Can you do it and explain how?

Information below.

Hello,

Please enter the menu item and find the field: https://prnt.sc/11mpth1

If you do not see this field, activate all in the top right Screen options.

Best Regards

ok I did it.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.wd-nav-vertical > li.shopbytool > a {
    padding:12px 18px 12px 118px;
    background-image: url(https://www.minervatooldesign.com/wp-content/uploads/2017/06/chair-1.svg);
    background-repeat: no-repeat;
    display:inline-block;
    min-height:45px; 
    min-width:136px;
    background-size:50%;
}

When you insert your image, there may be a necessity to correct the background size, let me know if you need help.

Best Regards

Please see private!

Hello,

Please add this code instead to the Theme Settings > Custom CSS > Global:

.wd-nav-vertical > li.shopbytool > a {
    padding:12px 0 12px 80px;
    background-image: url(https://www.minervatooldesign.com/wp-content/uploads/2021/04/toolbox.png);
    background-repeat: no-repeat;
    display:block;
    min-height:45px; 
    min-width:100px;
    background-size:25%;
    background-position:5%
}

Best Regards

See below.

Hello,

The icon used as an image and the icon used as a background cannot have absolutely the same view.

As I told you this is a trick, there is no option to insert an image icon in the menu item. That is why I have had to set it as a background.

I suggested you a workaround, I see it is not suitable for you, please delete all the custom CSS.

Please use the default theme options.

Best Regards

Yes — but can we not fix it so that the spacing and sizing is matching? This one is 1/3 the size and the text is all the way to the left (doesn’t even line up with the other navigation texts)

Hello,

The image on the background is very difficult to fit the exact sizes.

Sorry.

Best Regards

[Author]

Posts