[Resolved] Create mega menu with spec

[alexis]

Hello,

Is it possible to make the mega menu like on this model? I managed to make the mega menu but what is more difficult is to have the 2 columns and on the left the text “Services” in pink.

How can I do this please?

[Ying]

Hi Alexis,

Try this:

@media (min-width: 1025px) {
     .main-navigation .main-nav > ul > li#menu-item-359.mega-menu> ul {
        display: grid;
        grid-template-columns: auto repeat(3,300px) auto;
        grid-template-rows: auto auto;
        align-items: center;
    }
     .main-navigation .main-nav > ul > li#menu-item-359.mega-menu> ul >li:nth-child(1) {
        grid-column: 2/3;
        grid-row: 1/3;
        color: pink;
    }
     .main-navigation .main-nav > ul > li#menu-item-359.mega-menu> ul >li:nth-child(2) {
        grid-column: 3/4;
    }
     .main-navigation .main-nav > ul > li#menu-item-359.mega-menu> ul >li:nth-child(3) {
        grid-column: 4/5;
    }
     .main-navigation .main-nav > ul > li#menu-item-359.mega-menu> ul >li:nth-child(4) {
        grid-column: 3/4;
    }
     nav .main-nav > ul >li#menu-item-359.mega-menu>ul>li {
         width:100%;
    }
}

[alexis]

Thank you very much. There is just a bug in the hover on the mega menu because I need to add a margin or translate Y. But the menu will disappear. Do you have a solution ?

[Ying]

Try add this CSS under the same media query @media (min-width: 1025px) {

.main-navigation .main-nav > ul > li#menu-item-359.mega-menu a:after {
    content: "";
    position: absolute;
    top: 100%;
    bottom: -50px;
    left: 0;
    right: 0;
}

[alexis]

Top than you Ying

[Ying]

Glad it works and glad to help!

[Author]

Posts