Equal Column Height / Column Border
To make each column within a megamenu the same height, go to Mega Menu > Menu Themes > Custom Styling and add the following:
|
1 2 3 4 5 6 7 |
#{$wrap} #{$menu} li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu { display: flex; /* Make the columns equal height */ > .mega-menu-column:not(:first-child) { border-left: 1px #ccc solid; /* Add a border to the column */ } } |
Important: The sub menu type must be set to “Mega Menu – Grid Layout”