[Resolved] Mega Menu Assistance

Home Forums Support [Resolved] Mega Menu Assistance

Home Forums Support Mega Menu Assistance

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2215534
    Theodore

    Hello,

    I’ve been scrounging the forums looking for an answer to my mega menu problem and haven’t been able to find any answers.

    I’ve been building out my new release of my site and have been working on adding a mega menu. I’ve been able to add the menu, enable it to be the full width of the screen (through code found in forums) but I can’t find a solution to making the content within the the full menu be to the width of the container.

    Is there a css workaround to make the background full width and the content the same width as the container?

    Test Site url: https://wordpress-768679-2608212.cloudwaysapps.com/

    Thanks!

    #2215703
    Ying
    Staff
    Customer Support

    Hi there,

    Based on the current structure and flexbox CSS, it doesn’t seem to work when screen’s wider than 1250px.

    Can you try edit this CSS:

    @media (min-width: 769px) {
        nav .main-nav .mega-menu {
            position: static;
        }
    
        nav .main-nav .mega-menu > ul {
            position: absolute;
            width: 100%;
            left: 0 !important;
            display: flex;
            flex-wrap: wrap;
        }
    
        nav .main-nav .mega-menu > ul > li > a {
            font-weight: bold;
        }
    
        nav .main-nav .mega-menu>ul>li {
            display: inline-block;
            width: 25%;
            vertical-align: top;
        }
    
        nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
            width: 50%;
        }
    
        nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
            width: 33.3333%;
        }
    
        nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
            width: 20%;
        }
    
    	  nav .main-nav .mega-menu.mega-menu-col-6>ul>li {
            width: 14%;
        }
    

    to:

    	@media (min-width: 769px) {
        nav .main-nav .mega-menu {
            position: static;
        }
    
        nav .main-nav .mega-menu > ul {
            position: absolute;
            width: 100%;
            left: 0 !important;
            display: flex;
            flex-wrap: wrap;
        }
    
        nav .main-nav .mega-menu > ul > li > a {
            font-weight: bold;
        }}
    @media (min-width: 769px) and (max-width:1250px) {
        nav .main-nav .mega-menu>ul>li {
           display: inline-block; 
             width: 25%; 
             vertical-align: top;
        }
    
        nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
            width: 50%;
        }
    
        nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
            width: 33.3333%;
        }
    
        nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
             width: 20%; 
        }
    
    	  nav .main-nav .mega-menu.mega-menu-col-6>ul>li {
            width: 14%;
        }
    }
    @media (min-width: 769px) {

    and add this CSS to use gridinstead of flexboxfor screen wider than 1250px:

    @media (min-width: 1250px) {
    nav .main-nav .mega-menu > ul {
        position: absolute;
        width: 100%;
        left: 0 !important;
        grid-template-columns: auto repeat(5, 250px) auto;
        grid-template-rows: auto auto;
        grid-row-gap: 20px;
        display: grid !important;
    }
     nav .main-nav .mega-menu > ul >li:nth-child(1) {
        grid-column: 2 / 3;
        grid-row: 1;
    }
     nav .main-nav .mega-menu > ul >li:nth-child(2) {
        grid-column: 3 / 4;
         grid-row: 1;
    }
     nav .main-nav .mega-menu > ul >li:nth-child(3) {
        grid-column: 4 / 5;
        grid-row: 1;
    }
    }
     nav .main-nav .mega-menu > ul >li:nth-child(4) {
        grid-column: 5 / 6;
        grid-row: 1;
    }
     nav .main-nav .mega-menu > ul >li:nth-child(5) {
        grid-column: 6 / 7;
        grid-row: 1;
    }
     nav .main-nav .mega-menu > ul >li:nth-child(6) {
        grid-column: 2 / 3;
        grid-row: 2;
    }
     nav .main-nav .mega-menu > ul >li:nth-child(7) {
        grid-column: 3 / 4;
        grid-row: 2;
    }
    }
    #2215735
    Theodore

    That worked. Thank you!

    #2215738
    Ying
    Staff
    Customer Support

    No problem 🙂

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