Archived topic

Add padding inside mega menu

5 replies · Started by Elizabeth on October 6, 2021

Viewing posts 1–6 of 6

October 6, 2021 at 11:34 am #1955105

Hi,

Leo and Ying helped me out with some mega menu questions in this support ticket https://generatepress.com/forums/topic/fixed-with-inside-mega-menu/#post-1890966.

Here's a link to the site https://www.vcomm.candyappledev.com/

I have another question about the same menu that I haven't been about to figure out. I would like to add interior padding to the top and bottom of the megamenu. I've tried adding padding to the CSS below but this didn't work.

@media (min-width: 769px)
nav .main-nav .mega-menu > ul {
position: absolute;
width: 100%;
left: 0 !important;
display: flex;
flex-wrap: wrap;
box-shadow: none!important;
border-top: 1px solid #e8e8e8;
padding-top: 10px!important;
padding-bottom: 10px!important;
}

What do you suggest?

Thanks,
Liza

October 6, 2021 at 11:45 am #1955116

Hi Liza,

Your CSS has some formatting error, I've corrected it below:

@media (min-width: 769px){
    nav .main-nav .mega-menu > ul {
        position: absolute;
        width: 100%;
        left: 0 !important;
        display: flex;
        flex-wrap: wrap;
        box-shadow: none!important;
        border-top: 1px solid #e8e8e8;
        padding-top: 10px!important;
        padding-bottom: 10px!important;
    }
}

Let me know :)

October 7, 2021 at 5:19 am #1955737

Thanks, Ling. Sorry, I forgot to include the @media opening and closing brackets when I opened the ticket.

The code above works correctly when the menu has 2 columns (the News tab has 2 columns). When there are 3 columns, it works for the top padding, but not the bottom and I'm not sure why. What else do you suggest?

Liza

October 7, 2021 at 6:14 am #1955780

Hi there,

the issue is related to the Custom CSS you have here:

@media (min-width: 1085px) {
    nav .main-nav .mega-menu:hover>ul {
        transition: all 0.25s ease;
    }

    nav .main-nav .mega-menu:nth-child(3):hover>ul {
        height: 42px !important;
    }

    nav .main-nav .mega-menu:nth-child(2):hover>ul {
        height: 126px !important;
    }
}

Those fixed height properties are causing the issue. Which i assume were added for the expanding height hover effect.
If you can remove any CSS that was added for that effect, ill take a look at a different CSS solution.

October 7, 2021 at 7:55 am #1956077

Hi David,

Thank you very much! That was a silly oversight on my part - I just removed those heights and not the padding is correct.

Elizabeth

October 8, 2021 at 3:39 am #1956861

Glad to be of help!

This archived topic is closed to new replies.

Start building better websites today.