How do I configure the menu display on mobile?

Set when the mobile layout is used

In Mobile settings, enable responsive mode if your theme supports it. Activate mobile mode up to sets the maximum width, in pixels, at which the mobile layout is used.

Choose this threshold according to the space available in your theme. For example, with a 767 px threshold, check the menu in a narrower window and then in a window wider than that threshold. This number is an example, not a value to impose on every theme.

Choose which button opens the menu

If your theme already provides a hamburger icon to open the menu, use that mechanism. Enable Activate menu toggle mode when the theme does not provide this button.

If the theme icon is present but does not control the menu, have your integrator check the hamburger-icon selector in Advanced styles. The selector must match the element actually used by your theme.

Adjust appearance and visible entries

Mobile settings have their own colours, spacing and open/close icons. In particular, you can define different colours for the open and closed states.

To hide part of the menu on mobile, disable Active on mobile for the relevant objects. Check the entire parent chain: an item cannot appear if its group, column or tab is hidden. Permissions still apply too.

If the menu uses Sticky positioning, Enable Sticky mode on mobile? controls whether this behaviour is kept on small screens. Disabling it is recommended for a hamburger sidebar menu.

Check the result in your theme

Save the settings, then check the menu both closed and open, submenu opening and access to links. Test widths on either side of the threshold as well as a real phone, using the visitor profiles the menu is intended for.

Other FAQs in this category