making a category with icon
-
Hi, can I create an icon-based category layout like the two examples shown in the image? When I try, the icons appear very small. How can I increase their size like in the examples?
Attachments:
You must be
logged in to view attached files.
Hello,
You can create an icon-based category layout like in your examples. In WoodMart, the icon size depends on which field you use when editing the category:
Category Icon – used mainly in menus, headers, sticky menu, and mobile menus. Icons here are relatively small.
Large Category Icon – used in the category menu, shop page title, and category navigation elements. This is the field that controls larger icons for category layouts.
See Screenshots for better understanding:
https://postimg.cc/067RczGW
Best Regards,
I can’t open the screenshot you sent. It didn’t work when I used the large category icon. To use the category icon, should I add it as a menu item in the header, or should I add a category field using Elementor?
Hello,
Please see this Screenshot: https://jumpshare.com/s/vGq2tB9JfNdHrCT6iMbk
Could you please let me know where you would like to display the categories with icons? This will help me review the setup and suggest the most suitable solution.
If the icons are already added and you’re looking to increase their size, please share the page URL so I can check it directly.
Best Regards,
I sent the page link. I want it in the area where the categories are currently displayed. I had added icons to two of my categories. After checking, could you please also tell me what pixel size and format the icons should be?
thank you
Hello,
Try to add the following code snippet to the Custom CSS area in Theme Settings to do this. Change the value as per your requirements.
.wd-header-nav .wd-nav.wd-style-default {
--nav-img-height: 30px;
--nav-img-width: 30px;
}
Best Regards,
Yes, my icons are bigger now, thank you. I have one more question: as shown in the screenshot, can I add the category text below the icons? In short, can I place the icons above the text?
Hello,
Try to add the following custom css code in Theme Settings > Custom CSS > Custom CSS for desktop:
.wd-header-nav .wd-nav > li > a {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Remove side margin and add space below icon */
.wd-header-nav .wd-nav-img {
margin-inline-end: 0 !important;
margin-bottom: 8px;
}
Best Regards,
Hi. I have set the category icons, but I can’t align them to the center of their header. They look unbalanced right now and are positioned too high. How can I center my icon-based category area within its header?
he image wasn’t sent, I’m sending it again
Attachments:
You must be
logged in to view attached files.
Hello,
Under the menu items and above the slider there is a white space appear that is why the menu items are not vertically aligned. In order to get rid of it, enter the page: Dashboard > pages > find the page > edit and set margin-top:-40px in the upper container.
Please follow this guide and remove the white space after the header.
https://xtemos.com/docs-topic/top-and-bottom-paddings/
Best Regards,
I couldn’t find the settings area you mentioned. I’m editing my page with Elementor. I tried using the container settings in Elementor, but it didn’t work. As a side note: my categories are in the header area as a menu.
Thank you
With Elementor, I can scroll the container upwards.But this is not what I want.I want the categories I’m interested in to move away from the downward upper line. This is what I meant by centering it in the title.
thank you
Hello,
Please share a few screenshots highlighting the menu items where you want to move. Also, provide the WordPress login details so I can check this directly on your site and suggest a possible solution.
Best Regards,
Hello, I tried to explain what I wanted to say using visuals.
thank you
Attachments:
You must be
logged in to view attached files.
Hello,
Try to add the following custom css code in Theme Settings > Custom CSS > Custom CSS for desktop:
.whb-header-bottom .wd-nav>li {
margin-top: 20px;
}
Best Regards,
Hi, I’m creating my categories using Header Builder. I only want them to appear on my homepage. What should I do?
thank you.
Hello,
If you would like the categories (created with Header Builder) to appear only on the homepage, you can achieve this by creating a separate header specifically for that page.
The WoodMart theme allows you to assign different headers to different pages.
Create a new custom header in Header Builder and add your category menu to it.
Edit your Home page and in the bottom of the page settings assign the newly created header to this page only.
Please follow this guide. https://xtemos.com/docs-topic/how-to-set-different-header-for-specific-page/
https://xtemos.com/docs-topic/options-for-pages/
Best Regards,
.
