Note: If you are using the ‘Header & Footer Builder’, please refer to this link. But if you are using the old header and footer system, you can consider the below instructions.
All mobile header settings in Botiga are located in the Customizer. To find them, please go to Customize > Header > Mobile Header.
Layout & additional elements
Mobile devices have their own menu layout, different from the desktop menu. Choose one of the available layouts from the Layout option. Apart from the standard elements (site identity and menu trigger), you can also choose some additional elements that will be displayed in your mobile menu bar.
Please note: the Additional Elements use the same settings you used for Desktop (e.g. the link for the Button element you’ve set on desktop would automatically be the same for mobile).
Offcanvas
The mobile menu in Botiga is offcanvas. That means that when an user clicks the menu trigger (the hamburger icon), the mobile menu will slide in from the left-hand side.
You can use the Offcanvas mode option to select your preferred way of displaying the offcanvas menu: either partial screen width or full-screen width.
You can also choose some Additional elements that show up in your offcanvas menu, right after your menu links.
Tip: keep these elements unique (e.g. if you’ve chosen to display a button for your mobile menu bar, don’t also choose a button for your offcanvas menu as it will display the same thing).
Other settings
The rest of the settings available at the time of writing are:
- Link alignment: how the links align in the offcanvas menu;
- Link separator: enables a border after each offcanvas menu link (you can configure this separator from the Style tab);
- Link spacing: lets you control the spacing between the offcanvas menu links;
- Menu icon: this option lets you select a menu icon (trigger for the offcanvas menu).