{"id":111156,"date":"2017-04-19T10:55:46","date_gmt":"2017-04-19T09:55:46","guid":{"rendered":"https:\/\/www.megamenu.com\/documentation\/custom-theme-integration-copy\/"},"modified":"2017-04-26T16:29:22","modified_gmt":"2017-04-26T15:29:22","slug":"switch-mega-menu-to-flyout-menu-on-mobile","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/switch-mega-menu-to-flyout-menu-on-mobile\/","title":{"rendered":"How to switch a mega menu to a flyout menu on mobile"},"content":{"rendered":"

We often get asked how to switch a mega menu to a fly out menu on mobile.<\/p>\n

There is no built in option to let you do this automatically (as mega menus can contain widgets, but fly out menus cannot, so we cannot automatically switch between the two styles reliably), but it’s possible to achieve the same result with a few extra steps.<\/p>\n

You can also follow these steps if you are not happy with how a mega menu appears on mobile. By following these steps, you will learn how it is possible to create one mega menu that is displayed on desktop, and a new\/different mega menu that is only displayed on mobile.<\/p>\n

Example<\/h3>\n

In this example we’ll make some adjustments so that\u00a0the “About” menu item\u00a0and sub menu appears as a flyout menu on mobiles.<\/p>\n

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

 <\/p>\n

Step 1 –\u00a0Configure the “About” menu item to\u00a0only show on desktop<\/h3>\n

The first step is to make sure the “About” menu item and sub menu only appear on the desktop version of the menu.<\/p>\n

Go to Appearance > Menus<\/em>, hover over the top level menu item (in our case it is “About”) and click the blue “Mega Menu” button.<\/p>\n

In the Settings tab enable “Hide item on mobile<\/strong>” and save the changes.<\/p>\n

\"\"<\/a>Our “About” menu item and sub menu will now only be visible on the desktop menu.<\/p>\n

Step 2 –\u00a0Add the menu items back to the mobile menu<\/h3>\n

We can no longer see the “About” menu item or sub menu on mobile, so we now need to create a new top level menu item and sub menu which will only be displayed on mobile.<\/p>\n

Under Appearance > Menus<\/em>, re-add your items to the menu (these ones will only be displayed on mobile). For the new “About” menu item, enable the “Hide item on desktop”.<\/p>\n

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

You should end up with 2 sets of menu items – one set which is only displayed on desktop, and a new set which we will only display on mobile.<\/p>\n

End Result<\/h3>\n

There are no changes to the desktop menu (we still see the mega menu). However, on mobile, we now see the new “About” menu item and flyout sub menu:<\/p>\n

\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

We often get asked how to switch a mega menu to a fly out menu on mobile. There is no built in option to let you do this automatically (as mega menus can contain widgets, but fly out menus cannot, so we cannot automatically switch between the two styles reliably),…<\/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-111156","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":"We often get asked how to switch a mega menu to a fly out menu on mobile. There is no built in option to let you do this automatically (as mega menus can contain widgets, but fly out menus cannot, so we cannot automatically switch between the two styles reliably),...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/111156","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=111156"}],"version-history":[{"count":10,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/111156\/revisions"}],"predecessor-version":[{"id":111883,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/111156\/revisions\/111883"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=111156"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=111156"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=111156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}