To small icons on shop page category selector and on the menu bar

Hi,

My Icons apears to small on both the menu bar as the shop page top bar. Is there a way to solve this? I have read on the forum to add widht/height to the SVC file but it doesnt work with me.

Can you maybe adjust the below code. If needed you may adjust for both the menu bar and main nav.

Topic 1
Topic 2

Thanks in advance.

Example SVG Code which can be used as an exmple:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.cls-1,.cls-2{fill:none;stroke:#333;stroke-miterlimit:10;stroke-width:6px;}.cls-2{stroke-linecap:round;}</style></defs><path class="cls-1" d="M233.33,141.22,129.52,245.4a12.39,12.39,0,0,1-17.52-.18L56.88,190.29a12.39,12.39,0,0,1-.25-17.51L160.44,68.6a12.13,12.13,0,0,1,10.21-3.43l48.52,6.44a12.79,12.79,0,0,1,10.94,10.9L236.72,131A12.15,12.15,0,0,1,233.33,141.22Z"/><circle class="cls-1" cx="195.1" cy="106.96" r="14.3"/><path class="cls-2" d="M212,69.78C226,55.66,241.09,47.84,245.59,52.33S242.33,71.9,228.25,86,199.12,108,194.62,103.49"/></svg>

Hello,

Please provide your site admin access to the private area.

Best Regards

Provided in private content. Thank you!

Hello,

I have checked the SVG and I do not see the width and height in the code.

You need to 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/m4n0qw Set the width and height as per your needs, I give just a sample.
Then you will need to re-upload your icons in WordPress Dashboard.

Best Regards

Hi Elise,

Thanks for your answer. I have modified the code as you said but it doesnt solve my issue for both menu as shop page. Can you take a look again?

Start code:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.cls-1,.cls-2{fill:none;stroke:#333;stroke-miterlimit:10;stroke-width:6px;}.cls-2{stroke-linecap:round;}</style></defs><path class="cls-1" d="M233.33,141.22,129.52,245.4a12.39,12.39,0,0,1-17.52-.18L56.88,190.29a12.39,12.39,0,0,1-.25-17.51L160.44,68.6a12.13,12.13,0,0,1,10.21-3.43l48.52,6.44a12.79,12.79,0,0,1,10.94,10.9L236.72,131A12.15,12.15,0,0,1,233.33,141.22Z"/><circle class="cls-1" cx="195.1" cy="106.96" r="14.3"/><path class="cls-2" d="M212,69.78C226,55.66,241.09,47.84,245.59,52.33S242.33,71.9,228.25,86,199.12,108,194.62,103.49"/></svg>

Modified to:
<svg width="31" height="40" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.cls-1,.cls-2{fill:none;stroke:#333;stroke-miterlimit:10;stroke-width:6px;}.cls-2{stroke-linecap:round;}</style></defs><path class="cls-1" d="M233.33,141.22,129.52,245.4a12.39,12.39,0,0,1-17.52-.18L56.88,190.29a12.39,12.39,0,0,1-.25-17.51L160.44,68.6a12.13,12.13,0,0,1,10.21-3.43l48.52,6.44a12.79,12.79,0,0,1,10.94,10.9L236.72,131A12.15,12.15,0,0,1,233.33,141.22Z"/><circle class="cls-1" cx="195.1" cy="106.96" r="14.3"/><path class="cls-2" d="M212,69.78C226,55.66,241.09,47.84,245.59,52.33S242.33,71.9,228.25,86,199.12,108,194.62,103.49"/></svg>

I took a look into the Google Dev tools en there seems to be a max height of 18px (Stylesheet). If I turn it off manualy it resolves my issue (see attachment).

How can this be resolved so its automatically the upload size?

Attachments:

You must be logged in to view attached files.

Hello,

This style changes depending on the SVG height. It is max-width:40px on our demo: https://prnt.sc/104o7lx

I am checking your site it is 30px now: https://prnt.sc/104o8ji

Please try to increase the SVG size.

Best Regards

Hi,

Thnx for the reply. I changed the svg size as requested. The problem is with the max width. My icons are large enough (Set: 31width and 40height as you said).

If the max is set to 40 the issue will be solved. How can this be changed? Setting the width/height higher doesn’t change de max height settings.

Strange by the way that we need to set the svg size manually. Its commonly done using proper css. One of the key advantages of using SVG formats.

Looking forwards for a solution.

Hi all,

I figured it out myself: Dont take the time to manually adjust the width/height but just upload the icons and paste the following custom CSS in the theme editor (or your child theme).

.woodmart-navigation .category-icon {
    max-height: 40px !important;
} 

.category-nav-link .category-icon {
		height: 40px !important;
	max-height: 40px !important;}

The first part of the code adjust the max icon height on the main nav. The second one changes the size on the shop page. The issue was because there was a max height error in the theme. Using the !important overrides the default settings.

Regards,

Hello,

We are glad you have solved the issue.

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

[Author]

Posts