{"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":"2025-10-07T11:45:18","modified_gmt":"2025-10-07T08:45:18","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\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
Mobile
Menu<\/strong> element in action.<\/figcaption><\/figure>\n\n\n\n

The\u00a0Mobile Menu<\/strong>\u00a0header element gives you full control over how navigation menus behave and look on mobile devices. With just a few intuitive options, you can adjust the way submenus expand, icons appear, and spacing feels – ensuring your mobile menu is both functional and visually cohesive with the rest of your website.<\/p>\n\n\n\n

Granular Controls<\/h2>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

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

Just like in WordPress\u2019\u00a0Appearance \u2192 Menus<\/strong>\u00a0section, where you can create multiple menu sets, this control lets you assign which specific menu will appear inside the mobile menu element.<\/p>\n\n\n\n

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

This option controls how nested menus behave.<\/p>\n\n\n\n

    \n
  • When\u00a0disabled<\/strong>, all submenus remain expanded at all times, showing the full navigation hierarchy.<\/li>\n\n\n\n
  • When\u00a0enabled<\/strong>, visitors can expand and collapse submenus by tapping the toggle icon – perfect for keeping things tidy.<\/li>\n<\/ul>\n\n\n\n

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

    Automatically expands the menu path to highlight the page the visitor is currently on. This is especially useful if your navigation has deep submenu levels, ensuring users can always see where they are within the structure.<\/p>\n\n\n\n

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

    Here, you can choose the icon that appears next to menu items containing submenus. A few predefined icon styles are available, allowing you to match your menu\u2019s look to your site\u2019s overall design.<\/p>\n\n\n\n

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

    This setting adds a subtle shape or border around the submenu toggle icon, enhancing visibility and creating a more refined appearance.<\/p>\n\n\n\n

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

    Disable the indicator icons that highlight the menu’s hierarchy.<\/p>\n\n\n\n

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

    Controls the vertical spacing between individual menu items. Adjust this value to achieve a comfortable, easy-to-navigate layout on smaller screens.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

    The\u00a0Mobile Menu\u00a0header element gives you full control over how navigation menus behave and look on mobile devices. With just a few intuitive options, you can adjust the way submenus expand, icons appear, and spacing feels – ensuring your mobile menu is both functional and visually cohesive with the rest of your website. Granular Controls Select […]<\/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"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"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":3,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6174\/revisions"}],"predecessor-version":[{"id":14349,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6174\/revisions\/14349"}],"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}]}}