{"id":6174,"date":"2022-10-11T14:21:13","date_gmt":"2022-10-11T11:21:13","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&p=6174"},"modified":"2026-10-08T11:04:23","modified_gmt":"2026-10-08T08:04:23","slug":"menu-mobile","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/menu-mobile\/","title":{"rendered":"Menu – Mobile"},"content":{"rendered":"\n
\n
\"Mobile\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
The Menu \u2013 Mobile element in action.<\/figcaption><\/figure>\n\n\n\n

The Menu \u2013 Mobile<\/strong> element provides navigation designed specifically for smaller screens. It supports nested menu structures, interactive submenu controls and several appearance options that help keep complex navigation organised on mobile devices.<\/p>\n\n\n\n

To configure it, open the Customiser \u2192 Header<\/strong>, switch to the mobile view, and add or select the Menu \u2013 Mobile<\/strong> element in the desired mobile header row or Off Canvas Area.<\/p>\n<\/div>\n\n\n\n

\n

Granular Controls<\/h2>\n\n\n\n
\n
\n
\"Configuration\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
Menu \u2013 Mobile configuration options.<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n

Select Menu<\/h3>\n\n\n\n

Choose which WordPress menu should be rendered by the element. Menus can be created and organised from WordPress Dashboard \u2192 Appearance \u2192 Menus<\/strong>.<\/p>\n\n\n\n

Interactive Collapse<\/h3>\n\n\n\n

Control how nested menu levels are displayed:<\/p>\n\n\n\n

    \n
  • Disabled<\/strong> \u2013 all submenu levels remain expanded, exposing the complete navigation hierarchy.<\/li>\n\n\n\n
  • Enabled<\/strong> \u2013 submenu levels can be expanded and collapsed using the toggle displayed alongside parent menu items.<\/li>\n<\/ul>\n\n\n\n

    Interactive collapsing is particularly useful for larger navigation structures, as it keeps the initial menu more compact while still providing access to nested pages.<\/p>\n\n\n\n

    Auto Expand Current Item<\/h3>\n\n\n\n

    Enable Auto Expand Current Item<\/strong> to automatically open the submenu hierarchy that contains the page currently being viewed.<\/p>\n\n\n\n

    This keeps the visitor’s current position visible within deeper navigation structures without requiring them to manually expand each parent level.<\/p>\n\n\n\n

    Dropdown Toggle Icon<\/h3>\n\n\n\n

    Choose the icon displayed alongside menu items that contain a submenu. Several built-in icon styles are available, allowing the expansion control to match the rest of your header design.<\/p>\n\n\n\n

    Dropdown Toggle Shape<\/h3>\n\n\n\n

    Add an additional shape around the submenu toggle icon to make the control more prominent and easier to distinguish from the menu item’s regular link.<\/p>\n\n\n\n

    Submenu Dots<\/h3>\n\n\n\n

    Show or hide the small visual indicators used to emphasise the hierarchy of nested submenu items. Disabling them creates a cleaner presentation when the structure is already clear through spacing and indentation.<\/p>\n\n\n\n

    Items Vertical Spacing<\/h3>\n\n\n\n

    Adjust the vertical distance between individual menu items. Increasing the value creates a more spacious navigation layout, while reducing it keeps larger menus more compact.<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

    The Menu \u2013 Mobile element provides navigation designed specifically for smaller screens. It supports nested menu structures, interactive submenu controls and several appearance options that help keep complex navigation organised on mobile devices. To configure it, open the Customiser \u2192 Header, switch to the mobile view, and add or select the Menu \u2013 Mobile element […]<\/p>\n","protected":false},"author":1,"featured_media":6168,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[124],"class_list":["post-6174","documentation","type-documentation","status-publish","has-post-thumbnail","hentry","doc_categories-header-elements"],"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=6174"}],"version-history":[{"count":4,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6174\/revisions"}],"predecessor-version":[{"id":15273,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6174\/revisions\/15273"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media\/6168"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=6174"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=6174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}