Moving category icons (shop page) to top of category text with CSS in design

Hello!
I need to movie this 3 icons (category-icon) to top of text (.category-nav-link) in the way they are aligned center according to text ( even if text is different length )

And in the way it doesn’t mess up rest of the disain.

I have tried CSS and kind of messing up some other elements too and is not aligned to center.

Link in private content.

Thanks in advance!

Hello,

There is no option in Theme Settings to display the categories icons above the title and aligned center on every title.

If we try to achieve this using Custom CSS then it could affect the layout of when more categories will be added in the shop title.

If you still want the CSS then use the following Custom CSS in the Custom CSS for desktop area under Theme Settings >> Custom CSS.

.page-title-default .category-nav-link .category-icon {
position: absolute;
margin-left: 12px;
margin-top: -124px;
}

.page-title-default .woodmart-product-categories {
margin-top: 60px;
}

Best Regards.

Yeah this kind of CSS code I figured out myself on my dev website. Was hoping you can help with more professional and long term solution.

You definitely should crate that as a option! Putting icons in top of the categories 😉

Hello,

I have provided you with the CSS that will display the icons on top of the titles. You can use it.

We will keep your suggestion in mind and will forward it to the development department and if they find it necessary then an option for this will be added in the near coming update of the theme.

Best Regards.

[Author]

Posts