Footer menu with sub menus that open upwards
To make the sub menus for your mega menu appear above the menu bar instead of below, go to Mega Menu > Menu Themes and insert the following into the Custom Styling area:
|
1 2 3 4 5 6 7 8 9 10 |
@include desktop { /* Invert sub menu */ #{$wrap} #{$menu} li.mega-menu-item > ul.mega-sub-menu { bottom: $menu_item_link_height; } #{$wrap} #{$menu} > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu { bottom: 0; top: auto; } } |
Tip: If you want the sub menu indicator to point upwards instead of downwards, also add the following to the Custom Styling area:
|
1 2 3 4 5 |
@include desktop { #{$wrap} #{$menu} li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after { @include arrow-icon-state($arrow_up, $arrow_font); } } |
Mobile Menu
To make the mobile sub menu appear above the toggle bar instead of below it, go to Mega Menu > Menu Themes and insert the following into the Custom Styling area:
|
1 2 3 4 5 6 7 |
@include mobile { #{$wrap} #{$menu} { bottom: $toggle_bar_height; position: absolute; width: 100%; } } |