Browse Categories edit

Hi;
Quick question as I can’t find answer neither on the forum nor outside:
How can I edit the main Browse Categories Menu itself (please find the print screen attached).
I would like it to be wider (to have sufficient space in 1 row for longer category text), but also I would like to change the font for categories (to a smaller one) and the height of each category row (to see more categories on the home page without scrolling down). I would be super greatfull for your help.

Attachments:

You must be logged in to view attached files.

Hello,

Thank you very much for choosing our theme and for contacting us.

I am not sure it is possible to make the category menu wider. Please send your site URL we shall check and suggest.

You can change the font-size in the Theme Settings > Typography > Advanced typography https://xtemos.com/docs/woodmart/advanced-typography-settings/

As soon as we get your site URL we shall provide the CSS for the height. If your site is under maintenance, please provide your site admin access as well.

Best Regards

sure, please find the link in the private content (page is in construction)
m.

Hello,

Here is the code for the Category items:

body .categories-menu-dropdown  .item-level-0>a {
    padding: 12px 8px;
}

Change the paddings as per your needs and add the code to the Theme Settings > Custom CSS > Global

As for the Browse Categories, taking into consideration that you have a main and secondary menu in the row the expanding Broese categories it is not possible to expand the block as it would influence on the main and secondary menu.

However, there is an alternative: have a look at this demo https://woodmart.xtemos.com/demo-fashion/demo/fashion/ You see that category menu is displayed by means of Mega menu element of in the content area of the page https://gyazo.com/2e35690d4457c73824b0b80aa94d51f1 You can make the columns wider and get the result like this http://prntscr.com/mceglt

Best Regards

Thanks, this already helps as I managed to tighten up rows a bit.
Just I need also to widen the browse categories entire column, not as much as to have half a page of mega menu (like you seggested) but only a bit wider without changing the position of the menu itself (I don’t need too much room for secondary menu which can easily be tighter).
I tried simple solution like this:
body .categories-menu-dropdown .item-level-0>a {
padding: 6px 4px; width: 400px;
}
but it looks that the categories rows cannot expand before the main “browse categories” button will be wider (say 400-450px).
Any solution to this?
M.

Hello,

Add this code to the Theme Settings > Custom CSS > Desktop:

body .header-categories-nav {
    min-width: 450px;
}
body .whb-header:not(.whb-sticked) .header-categories-nav.opened-menu .menu-opener {
    min-width: 450px;
}

Change 450px as per your needs.

Best Regards

Thanks, that’s exactly what I was looking for

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts