Step 1: Enable Flex CSS
Go to Mega Menu > Menu Themes > General Settings, enable the “Use Flex CSS” option and save the theme.
With Flex CSS enabled, the columns within each row of a mega menu are automatically displayed at the same height, so no custom CSS is needed to make the columns equal height.
Step 2: Add a border between columns (optional)
To add a border between each column, go to Mega Menu > Menu Themes > Custom Styling and add the following:
|
1 2 3 |
#{$wrap} #{$menu} li.mega-menu-grid > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-column:not(:first-child) { border-left: 1px solid #ccc; /* Add a border between columns */ } |
Save the theme. The result:
Important: The sub menu type must be set to “Mega Menu – Grid Layout“. The CSS above also works for grid layouts used within Tabbed Mega Menus.