Return to previous page

Mega Menu – “Departments” – Category Images to be “Fixed” size

This topic has 10 replies, 2 voices, and was last updated 2 months, 3 weeks ago ago by Luca Rossi

Vijith

Participant

August 9, 2024 at 02:54

Hello There,

Thank you for your continuous effort in providing the best support. Kindly assist me to fix the following conditions on the theme.

Mega Menu – All Departments – Mega Menu Items

1. I tried to list the cagory images for each category. However, the thumbnail size of the Category image is not at a FIXED size. – I need to get it fixed
2. Vertical Scroll bar to be applied to the Mega Menu as the Mega Menu will have large number of categories

Please see attached 2 images for reference.

Appreciate your support as always.

Files is visible for topic creator and
support staff only.

#409591 Copied Theme version: 9.3.17

9 Answers
Luca Rossi

Support staff

August 9, 2024 at 17:28
Hi @Vijith,

Please try adding this custom CSS codes under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
@media (min-width: 980px){
    .etheme-elementor-nav-menu--dropdown .container {
        overflow-y: scroll;
        max-height: 100vh;
    }
    .etheme-elementor-nav-menu--dropdown .category-grid {
        padding: 0 !important;
        margin: 0 5px;
    }
    .etheme-elementor-nav-menu--dropdown .category-grid > a {
        height: 110px !important;
        width: 110px !important;
        display: block !important;
        padding-top: 0 !important;
        overflow: hidden;
    }
}
```
Hope it helps!
#409685 Copied
Vijith

Participant

August 9, 2024 at 21:57

Hi Rossi,

Thanks for your support – I still have some minor fixes on the custom css provided.

I had just changed the value of Container Height and Category Grid Size to 80px (W x H).

However, the category grid has some glitches on the text alingment (It is not center).
Secondly, I was trying to have cetain number of columns. (3 columns & 6 Columns) on the container. However, I am getting only 2 columns & 5 columns as per the attached screenshot.

Aslo, the space between each rows can be even reduced – I do not see any option for that

Further, I do not see an option to enable “New, Sale & All Products” categories of the particular category queried.

Appreciate your support.

Files is visible for topic creator and
support staff only.

#409705 Copied
Luca Rossi

Support staff

August 10, 2024 at 15:45
Hi @Vijith,

1. Please remove the right padding of your left column(Shop By Category): https://prnt.sc/b45Go6Tqiti1.

2. Update the previous CSS codes to this:
```
@media (min-width: 980px){
    .etheme-elementor-nav-menu--dropdown .container {
        overflow-y: scroll;
        max-height: 100vh;
    }
    .etheme-elementor-nav-menu--dropdown .category-grid {
        padding: 0 !important;
        margin: 0;
        justify-content: center;
    }
    .etheme-elementor-nav-menu--dropdown .category-grid > a {
        height: 110px !important;
        width: 110px !important;
        display: block !important;
        padding-top: 0 !important;
        overflow: hidden;
    }
}
```
Further, I do not see an option to enable “New, Sale & All Products” categories of the particular category queried.

These filters are available on the shop page only.

Best Regards,
The 8Theme Team.
#409770 Copied
Vijith

Participant

August 11, 2024 at 17:37

Hello Rossi,

Thanks a lot for your support..

The custom CSS works really great on the theme.

Appreciate if you could check and advise if we can include a backround color for the category images + and a Scroll Bar to the Left Section. (May be I am asking too much on this)

Please refer to the attached screenshot.

Files is visible for topic creator and
support staff only.

#409864 Copied
Luca Rossi

Support staff

August 12, 2024 at 05:29
Hi @Vijith,

1. The scrollbar is working perfectly, so we don’t have to add the second scrollbar the left section anymore: https://www.awesomescreenshot.com/video/30410566?key=5956a23831ce5c342438db436dc49cb7

2. For the background color of category items, please add this custom CSS:
```
.etheme-elementor-nav-menu--dropdown .category-grid>a {
    background-color: #f0f0f0;
}
```
Hope it helps!
#409887 Copied
Vijith

Participant

August 12, 2024 at 18:24

Hi Rossi,

Thank you the “Backround Color” for the category is working perfectly.

However, kindly refer to the attached screenshot where the left side (33.33%) of the secion is just blank once scrolled by 600px because of the items contained in that left section is only the “Parent” category. Where as the right side is having all individual ones which make it so long.

Further, when the scroll bar is active , I see an abnormal activity on the menu section. (The category menu section is hiding) – See this video : https://we.tl/t-3eHIocuDpU

And this is what I am trying to achive on the menu : https://we.tl/t-8CMqEHtOgL

I would highly appreciate if we could achive this.

Thank you.

Files is visible for topic creator and
support staff only.

#409990 Copied
Luca Rossi

Support staff

August 14, 2024 at 05:09
Hi @Vijith,

1. To add the scrollbar to the left column, please add this custom CSS directly to your column:

https://prnt.sc/3GZGodiYauX3

2. To fix the hover issue, please add this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
body .etheme-elementor-nav-menu.vertical .nav-sublist-dropdown {
    margin-left: -5px !important;
}
```
Hope it helps!
#410145 Copied
Vijith

Participant

August 14, 2024 at 12:11

Hi Rossi,

It is perfectly working.

However, on rightside category menu, we have got 2 scroll bars. (1 for the whole section another for the rightside column.

I believe, it is because we had added the below code earlier which requires a modificaion.

@media (min-width: 980px){
.etheme-elementor-nav-menu–dropdown .container {
overflow-y: scroll;
max-height: 600px;
}
.etheme-elementor-nav-menu–dropdown .category-grid {
padding: 0 !important;
margin: 0;
justify-content: center;
}
.etheme-elementor-nav-menu–dropdown .category-grid > a {
height: 100px !important;
width: 100px !important;
display: block !important;
padding-top: 0 !important;
overflow: hidden;
}
}

Files is visible for topic creator and
support staff only.

#410210 Copied
Luca Rossi

Support staff

August 15, 2024 at 05:26
Hi @Vijith,

Sorry. We forgot to tell you to remove this custom CSS. Can you please remove this one?
```
etheme-elementor-nav-menu–dropdown .container {
overflow-y: scroll;
max-height: 600px;
}
```
Thank you!
#410276 Copied
Tagged: customizable wordpress store, efficient mega menu design, fixed size category images, mega menu woocommerce themes, professional woocommerce layouts, responsive woocommerce themes, wordpress departments menu
Viewing 10 results - 1 through 10 (of 10 total)