Mega menu space around the items and items background

This topic has 5 replies, 2 voices, and was last updated 11 months ago ago by Tony Rodriguez

  • Avatar: Barbara
    creativesite
    Participant
    May 1, 2023 at 19:03

    Hi,
    can you please help in:

    1. How could I squeeze the space above and under
    the items in Mega Menu, 2 columns?

    2. And how could I set the background on hover of the items when using Mega menu?

    https://postimg.cc/8sjf1DZk

    Thank you in advance!

    4 Answers
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    May 2, 2023 at 08:27

    Hello, @creativesite,

    1. We kindly request that you copy and paste the following CSS code into XStore >> Theme Options >> Theme Custom CSS >> Global CSS and then clear your browser cache to view the changes.

    The result should look like the image provided: https://postimg.cc/Z9QKsr1K

    .nav-sublist-dropdown ul li {
        margin-bottom: 0px !important;
        padding-bottom: 15px !important;
    }

    2. To set the background on hover of the items, please copy and paste the following CSS code into XStore >> Theme Options >> Theme Custom CSS >> Global CSS and then clear your browser cache to view the changes:

    .item-design-mega-menu.columns-2 .nav-sublist-dropdown .container>ul>li:hover {
    background-color: green !important;
    }
    .item-design-mega-menu.columns-2 .nav-sublist-dropdown .container>ul>li:hover a {
    color: #fff !important;
    }

    We thank you for your cooperation and remain at your disposal.

    Best Regards,
    8Theme’s Team.

    Avatar: Barbara
    creativesite
    Participant
    May 2, 2023 at 14:23

    Hi Tony,

    Thank you.
    Unfortunately the padding and background is not so perfect now, it looks like this:
    https://postimg.cc/WFPYR2m2
    https://postimg.cc/XZ51DZCH
    https://postimg.cc/fJHP3QsK

    Can you please help?
    Thank you!

    Please contact administrator
    for this information.
    Avatar: Barbara
    creativesite
    Participant
    May 3, 2023 at 13:49

    Hi Tony,
    can you please help on this?
    The Secondary menu is a Megamenu and its dropdown items look a bit weird now.. I think changed the paddings somewhere and its background it too small, and the items are a bit too far from each other.

    Thank you!

    Please contact administrator
    for this information.
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    May 4, 2023 at 06:51

    Hello, @creativesite,

    We kindly request that you copy and paste the following CSS code into XStore >> Theme Options >> Theme Custom CSS >> Global CSS and then clear your browser cache to view the changes.

    @media only screen and (min-width: 993px){
    .item-design-mega-menu.columns-2 .nav-sublist-dropdown .container>ul>li {
        margin-bottom: 0px !important;
        padding-top: 10px !important;
        padding-bottom: 8px !important;
    }
    }
    .et_b_header-menu .nav-sublist-dropdown .item-link:hover {
        opacity: 1 !important;
    }

    Kind Regards,
    8theme team

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

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

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