- This topic has 5 replies, 3 voices, and was last updated 4 years, 6 months ago by
.
-
Posts
-
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,
LizaCustomer Support
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 🙂
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
Customer Support
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.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
Glad to be of help!
- You must be logged in to reply to this topic.
