Category Menu Structure

Hi,

we’re changing our menu structure and need your help with customizing.

1. We want to set up a category menu system, but there are some issues: the category icons appear on the left side of the category title/name -> we want the icon to appear centered above the title in a size about 30x30px. furthermore the category title/name should appear in only one single line + the dropdown arrow should disappear.

here you can see for clarification: https://ibb.co/L975Tbw

2. When clicking on the main category you’ll see the subcategories displayed, so far so good. But here are some issues either: The image of the main category now appears under the subcategories, it should be vice versa + the subcategories don’t show their icons -> here the icons should appear again centered above the subcategory title/name.

here you can see for clarification: https://ibb.co/3pyHhr8

3. When diving one step deeper in the category system by clicking on a subcategory (as seen in paragraph “2.”) whether the subcategories nor the category image are displayed. The latter maybe will be fixed when linking the main category’s image in all subcategories? But how to show the subcategory menu as in paragraph “2.”?

here you can see for clarification: https://ibb.co/HdWkBzZ

Looking forward & best regards,
Lu

Hello,

I saw the screenshots you attached.

Please provide the URL of the website if its possible with Custom CSS then I will provide you the CSS.

Regards.
Xtemos Studios

URL & login provided in private section.

thank you & best regards,
Lu

Hello,

1) Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

.woodmart-navigation .category-icon {
    top: 10px;
    position: absolute;
}

2) I have visited your website and icons are displaying with the subcategories. It seems that you managed to add icons as required.

3) If you want to display the categories in the page title then you can enable them from Theme Settings >> Shop >> Sidebar and page title.

Screenshot for Clarification: https://prnt.sc/10s8ieh

Best Regards

Hi,

1) this partially worked for the main category menu -> category titles/names appear in one line & the icon appears centered above the category titles/names.

BUT there are still some issues:
– the icon gets displayed way too small, it should be about 30×30 or 40×40 px (= same appearance as the icons in the html-block when hovering a main category title/name in the main menu)
– icon + category title together should be horizontally centered in the menu line, now there’s little space between top menu line & icon and too much space between category title & bottom menu line.
– the dropdown arrow right beside the category title should disappear.

here’s an example for clarification: https://ibb.co/y0fNfHj

+ i think there’s a problem with firefox. using firefox (cache already deleted) the icons only appear left beside the category title & not centered above…)

2) Yes, it also partially works here. The subcategories appear, but the icons are displayed left beside the subcategory -> icons should appear centered above the subcategory title (as in paragraph “1)”).

3) categories in page title + show current category ancestors were already enabled. It works until the subcategory page. but when i enter one subcategory, no subcategory menu is displayed -> current category ancestors of the main category should stay visible permanently.

+ there’s no need for the ‘back’ arrow, we would like to make the arrow disappear.

Thank you & best regards,
Lu

Hello,

1) Please try adding the following Custom CSS in the Custom CSS for the desktop area under Theme Settings >> Custom CSS.

.woodmart-navigation .category-icon {
    max-height: 30px;
}

.woodmart-navigation .category-icon {
    top: 8px;
    position: absolute;
}

.whb-color-dark .navigation-style-default .item-level-0>a:after {
    display: none;
}

2) Try moving the info box icon above the extra menu list item by editing the HTML Block.

3) Please Go to Theme Settings >> Shop >> Sidebar & Page Title and try enabling the option.

Screenshot for Clarification: https://prnt.sc/10t6qxf

Then the neighbors will be displayed when no children.

And to remove the back button try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.shop-title-wrapper .woodmart-back-btn {
    display: none;
}

Best Regards.

Hi,

thank you for your help, step by step we are coming closer 🙂

1) your custom css worked so far, but there are still two issues:

– there’s too little space between the category icon and the category title -> there should be 10px space between those two.
– after that the category icon + category title should be CENTERED in the menu layer.

I attached you a screenshot for clarification (red marked paragraph 1) & 2)): https://ibb.co/3cQcSXZ

2) i think you haven’t understood what i want… changes to do:

– increase the size of the subcategories icon to 30×30 px
– increase the space between the subcategories by adding ~30px space

Pls see again the screenshot for clarification (red marked paragraph 4) & 5)): https://ibb.co/3cQcSXZ

3) Pls remove the ‘BACK’-arrow, there’s no need for it.

Pls see again the screenshot for clarification (red marked paragraph 3)):
https://ibb.co/3cQcSXZ

Appreciate your help, best regards, LU

Hello,

You are Most Welcome.

Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

.woodmart-navigation .category-icon {
    padding-bottom: 10px;
}

.whb-header-bottom {
    padding-top: 20px;
}

.shop-title-wrapper .woodmart-back-btn {
    display: none;
}

.hasno-product-count .category-nav-link .category-icon {
    max-height: 30px;
}

.hasno-product-count .category-nav-link {
    padding-right: 20px;
    padding-left: 20px;
}

Regards.
Xtemos Studios.

[Author]

Posts