{"id":213725,"date":"2019-09-19T14:50:05","date_gmt":"2019-09-19T13:50:05","guid":{"rendered":"https:\/\/www.megamenu.com\/documentation\/menu-item-options-copy\/"},"modified":"2024-09-06T11:34:35","modified_gmt":"2024-09-06T10:34:35","slug":"mobile-menu","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/mobile-menu\/","title":{"rendered":"Mobile Menu"},"content":{"rendered":"\n

The Responsive Breakpoint<\/h3>\n\n\n\n

Your mega menu will automatically collapse down to a mobile style menu on smaller screens. To test the mobile menu simply reduce the width of your browser window. You can adjust the screen width at which the menu converts to a mobile style using the Responsive Breakpoint option in the Theme Editor.<\/p>\n\n\n\n

It is a good idea to synchronise this option with your theme. For example, if your theme collapses to a mobile style layout at 768px wide, you might want to set the Responsive Breakpoint to 768px too.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

The Mobile Toggle Bar<\/h3>\n\n\n\n

We’ve built a drag and drop toggle bar designer into the theme editor. This allows you to control the elements within the toggle bar and their position. Pro users will be able to add advanced blocks to the toggle bar, including logos, search boxes, custom HTML and icons.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Styling the Mobile Menu<\/h3>\n\n\n\n

Use the options under Mega Menu > Menu Themes > Mobile Menu<\/em> to adjust the style of your mobile menu. Note that the sub menu styling will be inherited from the desktop menu.<\/p>\n\n\n\n

Controlling the visibility of items within the Mobile Menu<\/h3>\n\n\n\n

It is a good idea to keep your mobile menu as simple as possible. If you want to prevent a specific item or items from appearing in the mobile menu, head to the Appearance > Menus page, hover over the menu item in question and click the blue Mega Menu button to open the settings for that menu item. Enable the “Hide on mobile” option.<\/p>\n\n\n\n

There is a “Hide Sub Menu on Mobile” option here too.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Mobile Menu Effect (Off Canvas or Standard)<\/h3>\n\n\n\n

With Max Mega Menu you can choose the type of mobile menu to use. By default the menu will drop down below the toggle bar when the toggle bar is clicked, but you can also choose an “off canvas” style where the mobile menu will slide in from the left or right hand side of the page.<\/p>\n\n\n\n

To change the mobile menu style, go to Appearance > Menus<\/em> and adjust the “Effect (Mobile)” option.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Click Event on Mobile<\/h3>\n\n\n\n

If you have set your desktop menu to show the sub menus on Hover, we will automatically switch the event to Click on mobiles\/touch screen devices. This enables uses with touch screen devices to navigate the menu. For items which represent both a link to a page, but also toggle the visibility of their sub menu, there is an option under Mega Menu > Menu Locations > Click Event Behaviour<\/em>. This will let you select between:<\/p>\n\n\n\n

    \n
  • First click opens sub menu, second click follows link (default)<\/li>\n\n\n\n
  • First click opens sub menu, second click closes sub menu<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

    The Responsive Breakpoint Your mega menu will automatically collapse down to a mobile style menu on smaller screens. To test the mobile menu simply reduce the width of your browser window. You can adjust the screen width at which the menu converts to a mobile style using the Responsive Breakpoint…<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"open","template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"ht-kb-category":[13],"ht-kb-tag":[],"class_list":["post-213725","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-getting-started"],"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":"The Responsive Breakpoint Your mega menu will automatically collapse down to a mobile style menu on smaller screens. To test the mobile menu simply reduce the width of your browser window. You can adjust the screen width at which the menu converts to a mobile style using the Responsive Breakpoint...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/213725","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=213725"}],"version-history":[{"count":8,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/213725\/revisions"}],"predecessor-version":[{"id":414523,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/213725\/revisions\/414523"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=213725"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=213725"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=213725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}