Return to previous page

Questions about the “all departments” section

This topic has 2 replies, 2 voices, and was last updated 1 years ago ago by Tony Rodriguez

GTP

Participant

November 12, 2023 at 11:35

Hi there 8theme team,

Just have some questions on the all departments section you have on the theme.

1) The sizes of tabs, which come out when the text is hovered over are all different. Is there anyway to have a universal size for this for a cleaner look?

For example if you hover over the tabs on the demo; https://xstore.8theme.com/elementor/demos/niche-market02

they all have different sizes.

2) Is there anyway to highlight the text/block which we are hovered over so customers can know what “department” they are on?

For example, if someone hovers over the words “Electronics”, the text or block can become another color? Currently there is no way to know what we are hovered over.

3) Can we add a scroll on this element to add as many departments as we want?

4) How do we add/edit the icons appearing before the text?

5) Can we add lines between each department so it looks more cleaner and easy to distinguish?

6) Can we have more than one of these menus? It would be great if we could have more of these available, but currently only get one on the menu making section.

Thank you

Please, contact administrator
for this information.

#373507 Copied Theme version: 9.2.2

1 Answer
Tony Rodriguez

Support staff

November 13, 2023 at 10:24
Hello, @GTP,

Thank you for contacting us and for using XStore.

1/ We would like to inform you that it is possible to adjust the dimensions of the tabs that appear upon hovering over the text. To do so, kindly proceed to your WordPress dashboard and follow these steps:

1. Go to ‘Appearance’.
2. Select ‘Menus’.
3. Click on ‘All department menu’.
4. Choose ‘Menu Options’.
5. Enable the option ‘Set same mega menu height for all menus’.
6. Remember to save your settings after making the changes.

For your convenience, we have provided an image to serve as a visual guide. https://imgur.com/Q1LPryq

2/ Please copy and paste the following CSS code into XStore >> Theme Options >> Theme Custom CSS >> Global CSS and then clear your browser cache:
```
.et_b_header-menu .secondary-menu-wrapper .menu>.item-design-mega-menu:hover {
    background-color: orange !important;
}
.et_b_header-menu .secondary-menu-wrapper .menu>.item-design-mega-menu:hover a {
    color: #fff !important;
}
.et_b_header-menu .secondary-menu-wrapper .menu > li:hover {
    background-color: orange !important;
}
.et_b_header-menu .secondary-menu-wrapper .menu > li:hover a {
    color: #fff !important;
}
```
3/ To show more items scroll on the all departments menu, please copy and paste the following CSS code into XStore >> Theme Options >> Theme Custom CSS >> Global CSS and then clear your browser cache:
```
ul#menu-all-departments {
    height: 400px !important;
    overflow-y: scroll !important;
}
```
4/ If you wish to add image icons to the menu is similar to the XStore demo, please navigate to Dashboard > Appearance > Menus > new all departments menu > Click on 8Theme custom link option > Menu option > there you may see the option Use img like, Choose/Select as image.

Please refer to the provided images here: https://postimg.cc/v4BdVW9q , https://ibb.co/hc74CXh and https://ibb.co/K038K1f. You are welcome to use any icon image in the image box as per your needs.

Additionally, you can watch a complete video for a better reference here: https://www.youtube.com/watch?v=7QluEYxznKs&list=PLMqMSqDgPNmCCyem_z9l2ZJ1owQUaFCE3&index=11.

5/ Please copy and paste the following CSS code into XStore >> Theme Options >> Theme Custom CSS >> Global CSS and then clear your browser cache:
```
.et_b_header-menu .secondary-menu-wrapper .menu>.item-design-mega-menu {
    border-bottom: 1px solid #000 !important;
}
.et_b_header-menu .secondary-menu-wrapper .menu > li {
    border-bottom: 1px solid #000 !important;
}
```
Please be advised that you have the option to alter the color in the provided css code according to your requirements.

6/ Please submit a request here https://www.8theme.com/taskboard/, so our dev team read it.

We hope this information is helpful.

If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

Best Regards,
Team 8Theme.
#373588 Copied
Tagged: all departments section, woocommerce department guide, woocommerce questions, woocommerce themes, wordpress ecommerce, wordpress store setup, wordpress woocommerce tips
Viewing 2 results - 1 through 2 (of 2 total)