Mobile Header
Manage the way your site is displayed on mobile devices.
On mobile devices the header is replaced by a mobile version, which just shows the logo and a menu toggle to display the navigation. The header that is displayed on desktops and large devices can be configured in the Header and Navbar section.
The following settings can be found in the Layout → Mobile panel of YOOtheme Pro.
Breakpoint
Use the Breakpoint setting to define the device size at which the desktop header is replaced with the mobile version. The optimal breakpoint setting highly depends on the number and sizes of navbar items in your header. Use the device preview buttons to find out what works best for you.
| Breakpoint | 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. |
Note The actual pixel value of the breakpoints can be altered using the style customizer.
Navbar
There are three options available to control the mobile navbar position and its behavior.
| Setting | Description |
|---|---|
| Static | 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 and Menu Toggle
The mobile header consists of two visual parts: the logo and the menu toggle.
Logo
A logo for the mobile header can be picked in the Layout → Site panel of YOOtheme Pro.
| Options | Description |
|---|---|
| Logo | Choose between left and right alignment, center the logo or hide it. |
| Padding | Remove logo padding if logo is aligned to the left or right. |
Menu Toggle
The menu toggle will only show up if there is content to display, i.e. if a mobile menu is selected or a widget is published in the mobile area. The main menu is hidden and is displayed after clicking the menu toggle.
| Options | Description |
|---|---|
| Menu Toggle | Choose between left and right alignment or hide the toggle. |
| Menu Toggle Text | Show the text label Menu next to the hamburger icon. |
Menu Style
Choose the Menu Style and center the menu and the content horizontally.
| Options | Description |
|---|---|
| Menu Style | Choose between the Default menu and the Primary menu with a larger font-size. |
| Text Alignment | Center the menu text and the content of the mobile area. |
Menu Animations
There are three different menu animations to display the menu when toggled.
| Animation | Description |
|---|---|
| Offcanvas | An offcanvas sidebar slides in from the left or right side of the page. |
| Modal | A fullscreen modal fades in while covering the whole page. |
| Dropdown | A dropdown slides in from the top of the page. |
Optionally, for the offcanvas and the modal animations, you can choose to center the menu and the content vertically.
Offcanvas
Choose between Slide, Reveal and Push offcanvas animations. Optionally, you can display the offcanvas bar on the right.
| Animation | Description |
|---|---|
| Slide | The offcanvas slides in and overlays the content. |
| Reveal | 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
Use the modal animation to display the menu in a modal. There are no further settings for this type of animation.
Dropdown
Choose between Slide and Push dropdown animation.
| Animation | 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. |
