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.
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 elements in your header. Experiment with different viewports to find out what works best for you.
|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.
Select Static, Sticky or Sticky on scroll up display of the navbar. A Static navbar will move out of the viewport on scrolling while a Sticky one will stick at the top of the viewport. A navbar set to Sticky on scroll up will move out of the viewport when scrolling down, and it will become sticky on scrolling up.
The mobile header consists of two visual parts: the logo and the menu toggle. The main menu is hidden and is displayed after clicking the menu toggle.
|Logo||Choose between left and right alignment, center the logo or hide it.|
|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.|
The mobile menu itself comes with different style options.
|Menu Style||Choose between the default menu and the primary menu with a larger font-size.|
|Alignment||Center the menu and the content of the
Note You can publish any content below the menu using the mobile module position.
There are three different menu animations to display the menu when toggled.
|Offcanvas||An off-canvas sidebar slides in and out from the left or right side of the page.|
|Modal||A fullscreen modal fades in and out while covering the whole page.|
|Dropdown||A dropdown slides in and out from the top of the page.|
Optionally, the menu can be centered vertically when using the Offcanvas or Modal animation.
There are three different offcanvas animations.
|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.|
There are two different dropdown animation.
|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.|