Return to previous page

Customizing All departments / Categories menu (separator, background, hover-color, distance)

This topic has 8 replies, 3 voices, and was last updated 1 years ago ago by creativesite

creativesite

Participant

April 19, 2023 at 17:41

1) Can you please help how can I adjust the distance between the Categories?

In “Header Builder > All departments > Dropdown > Computed Box > edit padding top and bottom” I can edit the padding, but not the distance between the categories, and I’d like to pull them a bit together, so it doesn’t occupy a big space there. (I attached screenshot)
https://postimg.cc/9wR5W43g

2) Is there a way or code to put Separators between the categories? (see on image)
https://postimg.cc/9wR5W43g

3) Is there a way to set a Hover-color when a category is hovered over?

4) Setting All departments background:
I put the code here in case someone needs it:
Into custom CSS:

.secondary-menu-wrapper .menu {
background-color: #fafafa !important;
}

#353864 Copied Theme version: 9.1.1 WooCommerce version: 7.6.0

7 Answers
Tony Rodriguez

Support staff

April 20, 2023 at 06:56
Hello, creativesite,

1) In order to adjust the distance between the Categories, we kindly ask that you copy and paste the following CSS code to XStore >> Theme Options >> Theme Custom CSS >> Global CSS. Once this is done, please clear your browser cache and check back to your site.
```
.et_b_header-menu .secondary-menu-wrapper .menu>.item-design-mega-menu {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.et_b_header-menu .secondary-menu-wrapper .menu > li {
    margin-bottom: 0 !important;
}
```
Please refer to the image provided at the following link for further reference: https://postimg.cc/mzfQF2tL and https://postimg.cc/qz563M5P

2) To put Separators between the categories, please go to Dashboard > Appearance > Menus > All department menu > Menu options > there you have to choose static block as per your requirement and save setting. Check here for reference: https://www.veed.io/view/910d1eb5-f51d-42c4-a30b-2ce8ef17fcd1?sharingWidget=true&panel=share

3) To set a Hover-color when a category is hovered over, We kindly ask that you copy and paste the following CSS code to XStore >> Theme Options >> Theme Custom CSS >> Global CSS. After doing so, please clear your browser cache and check back to your site.
```
.et_b_header-menu .secondary-menu-wrapper .menu li>a:hover {
    color: red !important;
}
```
You can adjust color in the following css as per your requirements.

4) To set All departments background color, We kindly ask that you copy and paste the following CSS code to XStore >> Theme Options >> Theme Custom CSS >> Global CSS. After doing so, please clear your browser cache and check back to your site.
```
.et-secondary-visibility-opened.et-secondary-on-home .secondary-menu-wrapper ul#menu-kategoriak {
    background-color: orange !important;
}
```
You can adjust color in the following css as per your requirements.

Best Regards,
8Theme’s Team
#353894 Copied
creativesite

Participant

April 20, 2023 at 07:22

Hi Tony,

thank you.
A few things to clarify:

1) Is there a way to make the distance less than 0?

2) I mean how can I create Separators, gray thin lines between the Categories, like here:
https://postimg.cc/64RTwrD3

3) Hover color, can you please share a code to set the background-color of when a Category-item is hovered over?
https://postimg.cc/N973R5qM

Thank you

#353897 Copied

creativesite

Participant

April 20, 2023 at 07:48

One more question 🙂

Customizing the second level-menu:
– how can I set a background in the second level-menu (I would like #fafafa background)?
– how can I set the second level-menu bordercolor to #e1e1e1?
– how can I set lightgray Separator in the second level-menu?

Like here: https://postimg.cc/PLdj5BRY

Thank you!

#353900 Copied
Tony Rodriguez

Support staff

April 20, 2023 at 08:10
Hello, creativesite,

1) In order to adjust the distance between the Categories, we kindly ask that you copy and paste the following CSS code to XStore >> Theme Options >> Theme Custom CSS >> Global CSS. Once this is done, please clear your browser cache and check back to your site.
```
.et_b_header-menu .secondary-menu-wrapper .menu>.item-design-mega-menu a {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.et_b_header-menu .secondary-menu-wrapper .menu>li a {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
```
2) we kindly ask that you copy and paste the following CSS code to XStore >> Theme Options >> Theme Custom CSS >> Global CSS. Once this is done, please clear your browser cache and check back to your site.
```
.et_b_header-menu .secondary-menu-wrapper .menu>.item-design-mega-menu a {
    border-bottom: 1px solid #000 !important;
}
.et_b_header-menu .secondary-menu-wrapper .menu>li a {
    border-bottom: 1px solid !important;
}
```
Please refer to the image provided at the following link for further reference: https://postimg.cc/5HBFsY3G

3) To set the “Green” background color when a Category item is hovered over, we kindly ask that you copy and paste the following CSS code to XStore >> Theme Options >> Theme Custom CSS >> Global CSS. Once this is done, please clear your browser cache and check back to your site.
```
.et_b_header-menu .secondary-menu-wrapper .menu>.item-design-mega-menu:hover {
    background-color: #74a434 !important;
}
.et_b_header-menu .secondary-menu-wrapper .menu li:hover {
    background-color: #74a434 !important;
}
```
“Customizing the second level menu”

1 & 2) To set the background color and border-color in the second-level menu, we kindly ask that you copy and paste the following CSS code to XStore >> Theme Options >> Theme Custom CSS >> Global CSS. Once this is done, please clear your browser cache and check back to your site.
```
.et_b_header-menu .secondary-menu-wrapper .nav-sublist-dropdown {
    background-color: #fafafa !important;
    border-color: #e1e1e1 !important;
}
```
3) To set a light gray Separator in the second level-menu, we kindly ask that you copy and paste the following CSS code to XStore >> Theme Options >> Theme Custom CSS >> Global CSS. Once this is done, please clear your browser cache and check back to your site.
```
.et_b_header-menu .secondary-menu-wrapper .nav-sublist-dropdown li {
    border-bottom: 1px solid #b7b7b7 !important;
}
```
Best regards,
8Theme’s Team
#353904 Copied
creativesite

Participant

April 20, 2023 at 10:22

Thank you very very much! 🙂

A last question in regards All departments dropdown menu,
how can I make the text white on hover in nav-sublist-dropdown?

https://postimg.cc/bDf3VKBZ

#353933 Copied
Rose Tyler

Support staff

April 20, 2023 at 10:50
Hello, Creativesite,

Thank you for your response.
```
.et_b_header-menu.et_element-top-level .item-design-dropdown .nav-sublist-dropdown ul > li > a:hover {
    color: white;
    opacity: 1;
}
```
Best regards,
8Theme’s Team
#353941 Copied
creativesite

Participant

April 20, 2023 at 17:25

Thank you very much!

#353985 Copied
Tagged: background, customization, distance, hover-color, menu, separator, templates, woocommerce, wordpress
Viewing 8 results - 1 through 8 (of 8 total)

The issue related to '‘Customizing All departments / Categories menu (separator, background, hover-color, distance)’' has been successfully resolved, and the topic is now closed for further responses

Customizing All departments / Categories menu (separator, background, hover-color, distance)

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection