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 elements in your header. Experiment with different viewports 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.

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.

Navbar Options

Logo and Menu

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.

Options Description
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.

A dedicated logo for the mobile header can be picked in the layout settings, and any content can be published below the hidden menu using the mobile widget area.

Note 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 mobile menu itself comes with different style options.

Options Description
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 mobile area.

Note You can publish any content below the menu using the mobile widget area.

There are three different menu animations to display the menu when toggled.

Animation Description
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.

Offcanvas

There are three different offcanvas animations.

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.

There are two different 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.
Back to YOOtheme

YOOtheme Pro