[Resolved] Mega Menu Assistance

[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!

[Ying]

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

[Theodore]

That worked. Thank you!

[Ying]

No problem 🙂

[Author]

Posts