SVG Icon and Menu Layout

This topic has 13 replies, 2 voices, and was last updated 6 years, 3 months ago by Elise Noromit.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
October 16, 2018 at 2:20 pm #83044

dreamzspl
Participant

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

Attachments:
You must be logged in to view attached files.

October 16, 2018 at 2:38 pm #83051

Elise Noromit
Member

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

October 17, 2018 at 8:39 am #83198

dreamzspl
Participant

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.

October 17, 2018 at 8:47 am #83208

dreamzspl
Participant

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.

October 17, 2018 at 10:30 am #83238

Elise Noromit
Member

Hello,

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

Best Regards

October 17, 2018 at 11:55 am #83263

dreamzspl
Participant

Hi, please see below

October 17, 2018 at 2:28 pm #83328
Elise Noromit
Member
Hello,

Add this code to the Theme Settings > Custom CSS:
```
.woodmart-wishlist-info-widget>a {
    padding: 0!important;
}
```
Best Regards
October 18, 2018 at 6:54 am #83468

dreamzspl
Participant

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.

October 18, 2018 at 7:32 am #83479

dreamzspl
Participant

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

October 18, 2018 at 8:32 am #83496
Elise Noromit
Member
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
October 18, 2018 at 8:54 am #83499

dreamzspl
Participant

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.

October 18, 2018 at 9:29 am #83513

Elise Noromit
Member

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

October 18, 2018 at 2:50 pm #83640

dreamzspl
Participant

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

October 18, 2018 at 4:51 pm #83667

Elise Noromit
Member

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