Return to previous page

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

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

  • Avatar: Vijith
    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
    Avatar: Justin
    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
    Avatar: Vijith
    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
    Avatar: Justin
    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
    Avatar: Vijith
    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
    Avatar: Justin
    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
    Avatar: Vijith
    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
    Avatar: Justin
    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
    Avatar: Vijith
    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
    Avatar: Justin
    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: , , , , , ,

  • Viewing 10 results - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.Log in/Sign up

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Poster – WooCommerce Theme
lazy-placeholder
X-Phone Store – WordPress WooCommerce Theme
lazy-placeholder
Hotel – WordPress Theme
lazy-placeholder
Spa – WooCommerce Theme
lazy-placeholder
Typography – WordPress WooCommerce Theme
lazy-placeholder
School – WordPress Theme
lazy-placeholder
Perfume – WordPress WooCommerce Theme
lazy-placeholder
Minimal Electronics – WordPress WooCommerce Theme
lazy-placeholder
NFT Crypto Marketplace – WordPress WooCommerce Theme
lazy-placeholder
Onepage Store – 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.