Mobile
Manage the way your site is displayed on mobile devices.
Overview
The following settings can be found in the Basic → Mobile panel.
Breakpoint
Use the Breakpoint setting to define the device size at which the desktop header is replaced with the mobile version.
Option | Description |
Small | Show the mobile header if the device width is below 640px. |
Medium | Show the mobile header if the device width is below 960px. |
Large | Show the mobile header if the device width is below 1200px |
Navbar
Let the navbar stick at the top of the viewport while scrolling or only when scrolling up. There are three options available to control the navbar position and its behavior.
Option | Description |
None | The navbar will move out of the viewport on scrolling. |
Sticky | The navbar will stick at the top of the viewport on scrolling. |
Sticky on scroll up | The navbar will move out of the viewport when scrolling down, and it will become sticky on scrolling up |
Logo
Select the alignment of the logo.
Menu Toggle
Select the alignment of the menu toggle icon. The toggle will only show up, if content is published in the mobile position.
Show the text label Menu next to the hamburger icon.
Menu Animation
Select the menu type displayed in the mobile position.
Animation | Description |
Offcanvas | An offcanvas sidebar slides in from the left or right side of the page.Modal |
Modal | A fullscreen modal fades in while covering the whole page. |
Dropdown | A dropdown slides in from the top of the page. |
With Offcanvas and Modal animation, you can center the menu item and the content vertically.
Offcanvas Animation
Choose between Slide, Reveal and Push offcanvas animations. Optionally, you can display the offcanvas bar on the right.
Mode | Description |
Slide | The offcanvas slides in and overlays the content. |
Revel | The page slides in from the viewport, and the offcanvas is revealed below the page content. |
Push | The offcanvas slides in and pushes the page content out of the viewport. |
Modal Animation
Use the modal animation to display the menu in a modal.
Dropdown Animation
Choose between Slide and Push dropdown animation.
Mode | Description |
Slide | The dropdown slides in from the top and overlays the content. |
Push | The dropdown slides in from the top and pushes the page content down. |
Last updated
