SVG Icon and Menu Layout

Hello, my questions are in the attached screenshot. Thank you.

Attachments:

You must be logged in to view attached files.

Hello,

1. Here you will find how to settle SVG icons in your menu https://xtemos.com/forums/topic/how-to-enable-svg-support/#post-83048

2. Appearance > Menu > Category menu > enter the menu item, find HTML block which is added, edit the HTML block accordingly.

3. I do not understand what do you mean. Where do you want to move the icons? You can edit them in Header Builder.

Best Regards

Hi Elise,

1. Thanks

2. Thanks

3. If you refer to the attached screen shot – after i added the svg icon for sub menu item “Fresh Food”, there is suddenly a padding below the sub menu item “Fresh Food”. How to remove the padding?

Attachments:

You must be logged in to view attached files.

Hi Elise,

Sorry, got my replies mixed up. Here’s correction:

1. What I mean is, if you refer to the attached screen shot – after i added the svg icon for sub menu item “Fresh Food”, there is suddenly a padding below the sub menu item “Fresh Food”. How to remove the padding?

2. Thanks

3. What i mean is, is it possible to let the wishlist and cart counters be closer to the wishlist and cart icons. They are quite far apart now.

Thank you.

Hello,

Please provide your site URL, if it is under maintenance, provide also site admin access.

Best Regards

Hi, please see below

Hello,

Add this code to the Theme Settings > Custom CSS:

.woodmart-wishlist-info-widget>a {
    padding: 0!important;
}

Best Regards

Hi Elise,

The code does not seem to work even after i have put inside Theme Settings > Custom CSS.

Also, will you be able to help on my previous question, please:
1. What I mean is, if you refer to the attached screen shot – after i added the svg icon for sub menu item “Fresh Food”, there is suddenly a padding below the sub menu item “Fresh Food”. How to remove the padding?

Attachments:

You must be logged in to view attached files.

Add on from my question 1:
i have seen another forumer post about same problem and the solution was to edit the svg icons in editor and add the code: https://gyazo.com/83fd36b0bb9628bb1aed2bd3d5d063c5

However, after i have done it and tried to reupload it, WordPress does not allow me to as it said the svg icon cannot be sanitised. How to resolve this?

Thanks

Hello,

Try this code:

.woodmart-wishlist-info-widget>a {
padding:0;
}

It is strange it does not work, I tested on your site. Please provide valid access to check again I cannot login with those you provided.

SVG make sure you have inserted width and height properly http://prntscr.com/l7fnku

Best Regards

Hi Elise,

1) The code still does not work. I provide log in below. Regarding the wishlist / cart icon counters – please see attached screenshot. Hope my enquiry is more clear now.

2) Regarding the SVG Icons, i still experience error message. Please see attached error message. How to resolve this?

3) Would also like to ask, in the event the SVG icon cannot be resolved, how to make the browse category items’ height increase by alittle, so that the heights are all consistent?
Please see attached.

Thank you.

Attachments:

You must be logged in to view attached files.

Hello,

1. The code works. http://prntscr.com/l7gdt6 There is no more space to move.

2. Convert SVG into PNG. The proper SVG format causes no errors.

3. Try using PNG.

Best Regards

Hi Elise,

Thank you for your reply.

Our preference is to use SVG as it is lighter and sharper compared to PNG.
Will you be able to suggest solutions for question 2 and 3, please.

Thanks

Hello,

I have the only workable solution for SVG:

Open your SVG icons file with some editor like Sublime Text or default system text editor and add width=”31″ height=”40″ attributes to your <svg> tag like it is shown: http://prntscr.com/l7mexq

Please note you can set any width and height value, for example, 30 and 30 100 and 100

Then you will need to re-upload your icons in WordPress Dashboard.

I attach a sample of the workable SVG, test it.

Best Regards

Attachments:

You must be logged in to view attached files.

[Author]

Posts