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, 10 months ago ago by creativesite

  • Avatar: Barbara
    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
    Avatar: Tony Rodriguez
    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
    Avatar: Barbara
    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
    Avatar: Barbara
    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
    Avatar: Tony Rodriguez
    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
    Avatar: Barbara
    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
    Avatar: Rose Tyler
    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
    Avatar: Barbara
    creativesite
    Participant
    April 20, 2023 at 17:25

    Thank you very much!

    #353985 Copied

  • Tagged: , , , , , , , ,

  • 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

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Shoes Store – WooCommerce Theme
lazy-placeholder
Agricultural Store – WordPress WooCommerce Theme
lazy-placeholder
Mobile Store – WordPress WooCommerce Theme
lazy-placeholder
Cocktails Store – WordPress WooCommerce Theme
lazy-placeholder
Pub – WordPress Theme
lazy-placeholder
Wedding Store – WordPress WooCommerce Theme
lazy-placeholder
Landing Watch – WordPress WooCommerce Theme
lazy-placeholder
Photographer – WordPress WooCommerce Theme
lazy-placeholder
Headphone Store – WordPress WooCommerce Theme
lazy-placeholder
Electron Store 01 – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.