Categories icon size at the categories page and mobile menu

I want to change the Icon (and text) size at the Categories pages and the mobile menu.

For the category pages, I tried adding this as I found it in the furom:

div.category-nav-link .category-icon {
max-height: 80px;
}
div.category-nav-link .category-name {
font-size: 18px;
}

div.category-nav-link .category-products-count {
font-size:14px;
}

But t didn’t make any difference.
-For the Categories icon in Mobile. I added this to the “Custom CSS for mobile”, but it didn’t make any difference either:
.woodmart-navigation category-icon {
max-height: 40px;
margin-right: 10px;
}

Can you help me?
Thanks

Attachments:

You must be logged in to view attached files.

Hello,

You can change the text size for the mobile, however, you cannot change the image size.

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

.category-nav-link .category-name {
    font-size: 14px;
}

.category-nav-link .category-products-count {
    font-size: 12px;
}

Set the size as per your needs.

Best Regards

Thanks. How can I make the icons bigger and the gap in between the subcategories loo better?
(Attached Screenshot)

Attachments:

You must be logged in to view attached files.

Hello,

If it is SVG you need to open your SVG icons file with some editor like Sublime Text or default system text editor and add width=”50″ height=”50″ attributes to your <svg> tag like it is shown: http://prntscr.com/m4n0qw
Then you will need to re-upload your icons in WordPress Dashboard.

Best Regards

I am using PNG files for the icons. Is there any way to change their size?

Attachments:

You must be logged in to view attached files.

Hello,

PNG file size is not changeable. The image would be damaged. You can change the size of the block which contains the PNG.

Best Regards

That is what I have been asking from the beginning. I want to make their block or size bigger.

Hello,

In this case, it is not possible. The wrapping bloc is <a> tag which is inline. Try to upload SVG images and set the width and height inside.

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
Try to use this convertor: https://image.online-convert.com/convert-to-svg
Then you will need to re-upload your icons in WordPress Dashboard.

Best Regards

[Author]

Posts