Mobile Menu
Last updated
Last updated
The Mobile Menu provides a streamlined navigation experience for smaller screens. It features a collapsible, touch-friendly interface with a hamburger icon that toggles the menu at the defined mobile menu breakpoint.
You can edit the Mobile Menu by going to Appearance -> Customize -> Header -> Mobile Menu.
The menu content is divided into two sections: Main Content and Footer Content. This structure allows you to add items to the end of the mobile menu container, making them easily accessible while on mobile devices.
Like other header sections, the mobile menu uses a drag-and-drop interface to organize and structure the menu elements.
The mobile menu offers a slightly smaller selection of elements, as not all elements available in other header sections are supported in the mobile menu.
To add elements simply click ➕ Add link in one of content containers and the list of elements will show up.
You can adjust the behavior and style of the mobile menu by accessing the options in the Mobile Menu section. Scroll down to the Menu Options section to make your changes.:
Type The Slide Menu provides a standard mobile menu animation, while the Full Screen option offers an alternative way to display the menu across the entire screen.
Slide Direction This option applies only to the Slide Menu type and allows you to set the direction from which the menu will slide into view on the screen.
Close Button Alternatively, you can add a close button (❌ shaped) to the screen to hide the mobile menu.
Breakpoint The breakpoint at which all menu types become hidden and the mobile toggle button appears, ensuring that only the mobile menu is visible at that viewport and smaller sizes.
Like other header parts, the mobile menu also supports custom styling, offering extensive options for configuring its appearance and design.
Overlay The overlay color that covers the screen when the mobile menu is active.
Content Background Applicable only to the Slide Menu type, this option sets the background color of the menu content container.
Links The colors for the normal, hover, and active states of the menu items.
Text Any text that is not a link inside the menu will be colored with this option.
Content Max Width The maximum width of the menu container on the screen, ideally set between 50% and 80% of the window width.
Item Spacing The spacing between header elements and root-level menu items.
Padding Padding applied within the menu container.
