Max Mega Menu Documentation

Centering Top Level Menu Items

To center the menu items within the menu bar:

1. Go to Mega Menu > Menu Themes.
2. Set ‘Menu Items Align’ to ‘Center’

Centering Menu Item Text

Text alignment can be set for the various levels (top level, second and third level within mega menus, flyout menus) within the Theme Editor:

Centering Menu Item Text (on Mobile Only)

1. Go to Mega Menu > Menu Themes.
2. Select your Menu theme and scroll to the bottom. Enter the following into the Custom Styling area:
   
   @include mobile { /* Center top level menu items */ #{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link { text-align: center; } /* Center second and third level items within mega menu */ #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link, #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link, #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link, #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link { text-align: center; } /* Center flyout menu items */ #{$wrap} #{$menu} > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link { text-align: center; } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   @include mobile {     /* Center top level menu items */     #{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link {         text-align: center;     }       /* Center second and third level items within mega menu */     #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link,     #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link,     #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link,     #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link {         text-align: center;     }          /* Center flyout menu items */     #{$wrap} #{$menu} > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {         text-align: center;     } }

3. Save the theme.