[Resolved] Create mega menu with spec

Home Forums Support [Resolved] Create mega menu with spec

Home Forums Support Create mega menu with spec

  • This topic has 5 replies, 2 voices, and was last updated 3 months ago by Ying.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2216748
    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?

    Alexis
    agency K-LYA

    #2216773
    Ying
    Staff
    Customer Support

    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%;
        }
    }
    #2216786
    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 ?

    Alexis
    agency K-LYA

    #2216815
    Ying
    Staff
    Customer Support

    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;
    }
    #2216823
    alexis

    Top than you Ying

    Alexis
    agency K-LYA

    #2216837
    Ying
    Staff
    Customer Support

    Glad it works and glad to help!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.