{"id":100622,"date":"2017-01-08T16:58:37","date_gmt":"2017-01-08T16:58:37","guid":{"rendered":"https:\/\/www.megamenu.com\/documentation\/flyout-menu-direction-copy\/"},"modified":"2020-03-23T09:27:58","modified_gmt":"2020-03-23T09:27:58","slug":"flyout-menu-vertical-align","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/flyout-menu-vertical-align\/","title":{"rendered":"Vertically align flyout menus to bottom of navigation bar"},"content":{"rendered":"

By default, “flyout” sub sub menus\u00a0are vertically aligned to the top of their parent item. If you have set up a long menu, with many levels, this can result in a menu that stretches right from the top to the bottom (and beyond) of the user’s screen.<\/p>\n

This will become a problem if the menu (or the theme header) is sticky\/fixed, as it will make it impossible for the user to scroll down and see all of the menu items.<\/p>\n

In the example below, “Menu Item 3 \/ 1” is aligned to the top of “Menu Item 3”:<\/p>\n

\"\"<\/a><\/p>\n

It is possible to adjust the positioning of Flyout Sub Menus so that they are horizontally aligned with the bottom of the menu.<\/p>\n

Go to Mega Menu > Menu Themes<\/em> and paste the following into the Custom Styling area:<\/p>\n

@include desktop {\r\n    #{$wrap} #{$menu} > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item,\r\n    #{$wrap} #{$menu}.mega-menu-vertical > li.mega-menu-megamenu.mega-menu-item, \r\n    #{$wrap} #{$menu}.mega-menu-vertical > li.mega-menu-flyout.mega-menu-item {\r\n        position: static;\r\n    }\r\n}<\/pre>\n
The flyout sub menus will now be aligned to the bottom of the navigation bar:<\/p>\n
\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
By default, “flyout” sub sub menus\u00a0are vertically aligned to the top of their parent item. If you have set up a long menu, with many levels, this can result in a menu that stretches right from the top to the bottom (and beyond) of the user’s screen. This will become…<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"ht-kb-category":[14],"ht-kb-tag":[],"class_list":["post-100622","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-faqs"],"uagb_featured_image_src":[],"uagb_author_info":{"display_name":"Tom Hemsley","author_link":"https:\/\/www.megamenu.com\/author\/megamenu\/"},"uagb_comment_info":0,"uagb_excerpt":"By default, “flyout” sub sub menus\u00a0are vertically aligned to the top of their parent item. If you have set up a long menu, with many levels, this can result in a menu that stretches right from the top to the bottom (and beyond) of the user’s screen. This will become...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/100622","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/comments?post=100622"}],"version-history":[{"count":8,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/100622\/revisions"}],"predecessor-version":[{"id":236771,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/100622\/revisions\/236771"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=100622"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=100622"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=100622"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}