[Resolved] Simple Mega Menu full screen width but with contained inner width

[Adrien]

Hello,

As shown on the screenshot enclosed im trying to set simple Mega Menu full screen width while I want the inner widt contained.

Appreciate your help.

[Fernando]

Hi Adrien,

You can add paddings to limit the Width in a way. For instance, try adding this CSS through Appearance > Customize > Additional CSS:

li.mega-menu > .sub-menu  {
    padding-left: 100px;
    padding-right: 100px;
}

[Adrien]

Dear Fernando, Thank you but it did not work. The text is still as shown on my previous screenshot align to the edges of the screen.
Id like to have the text aligned with my page content.

Thanks for your help

[David]

Hi there,

you will need to do something like this:

@media(min-width: 1280px) {
    .mega-menu-col-4 > ul {
        justify-content: center;
    }
    .mega-menu-col-4 > ul > li {
        max-width: 300px;
    }
}

here we target the 4 column menu, and center align the flex content.
And then set a max width on each of the sub menu items.
Make sure the sum of the max-widths don’t exceed the media query it is in.

[Adrien]

Hey David, Thank you! Sorry for my late reply.

I have thought again and I think mega menu is very complicated to style with GP. I also want to show menu descriptions etc…
Since my site is in diff languages, I already have 1 menu/lang. I can’t also do that for the slide off panel.

I hope soon GP/GB will enable us to build mega menu simply using elements and blocks. If you check now most of the websites on internet have a mega menu.

Thank you again.

[David]

It could be doable in the future 🙂

Glad we could be of some help, i hope you find a working solution for today

[Adrien]

Yes as always you rock!

[Author]

Posts