Adjust Menu Width

By default the menu will fill 100% of the width dictated by your theme.

We generally advise against using the option below, instead you should adjust the width of the container that the menu sits inside. This would require editing/overriding your theme CSS.

To change the width of your menu you can add the following CSS to your menu theme by going to Mega Menu > Menu Themes > Custom CSS.

@include desktop {
    #{$wrap} {
        max-width: 1080px; /** width in pixels or percent **/
        margin: 0 auto; /** center align menu **/
    }
}

@include desktop {

#{$wrap} {

max-width: 1080px; /** width in pixels or percent **/

margin: 0 auto; /** center align menu **/

}

Make sure you use “max-width” and not “width” to ensure the menu remains responsive.

You will only be able to use the CSS above to make the menu narrower than the theme dictates. If you want to make your menu wider you will need to edit/override the theme CSS and increase the width of the container that the menu sits inside.

Before:

After:

Max Mega Menu Documentation

Adjust Menu Width

Related Articles