[Resolved] Fixed with inside mega menu

[Elizabeth]

Hi! I’m working on a new website: https://vcomm.candyappledev.com/. My client would like a mega menu that looks similar to this website: https://www.networkbuilding.com/.

I have the mega menu set up using this css and am now trying to figure out how to set a fixed width to the inside of the mega menu. At the moment, the 3 inside columns stretch to fit 100%. I would like to contain the width of the columns and center them within the mega menu container — similar to this website.

Is there also a way to add a slide effect to the mega menu when it opens?

I appreciate your suggestions!

[Leo]

Hi there,

Try editing this existing CSS:

nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
    width: 33.3333%;
}

to this:

nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
    width: 200px;
}

Then add this as well:

nav .main-nav .mega-menu.mega-menu-col-3>ul>li:first-child {
    margin-left: auto;
}
nav .main-nav .mega-menu.mega-menu-col-3>ul>li:last-child {
    margin-right: auto;
}

[Elizabeth]

Thanks, Leo – that works perfectly! One last question: is there a way to add a slide down effect to the mega menu when it opens?

[Ying]

Hi Elizabeth,

Try this CSS:

@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;
}
}

Please keep in mind or make a note that the value 126pxand 42pxis based on your current menu layout, if you change them in the future, the numbers need to be updated.

For screen narrower than 1085px, the menu wraps to 2 rows, I found the effect doesn’t look as good. So I use 1085pxas the media query for the above CSS.

[Elizabeth]

Thank you, Ling. This works perfectly and I appreciate the height CSS explanations — I’ll keep this in mind if I change any of the related values.

[Ying]

You are welcome Elizabeth 🙂

[Author]

Posts