Mobile Header

Note: This option requires the Menu Plus add-on in GP Premium.

The mobile header option is found in Appearance > Customize > Layout > Header.

This option disables the default website header on mobile devices:

and replaces it with a streamlined version:

The mobile header inherits your navigation colors set in Customize > Colors > Primary Navigation.

Breakpoint

Customize the px number when the mobile header kicks in. The default value is 768px.

Branding Type

Add the site title or a logo in the mobile header. It is recommended that the logo should be quite small – kind of like an icon for your website.

The height of the logo is determined by the menu item height option with mobile toggle activated.

There are also 10px of default top and bottom padding which can be removed with this CSS:

.site-logo.mobile-header-logo img {
    padding: 0;
}

Sticky

Activate sticky mode for the mobile header.

Hide when scrolling down

Checking this option will hide the sticky mobile header unless you’re scrolling up towards the top of the site. This can save you valuable screen space.

Adding HTML Inside the Mobile Header

You may want to add more elements inside your mobile header like social icons, a phone number etc..

You can do so using the inside_mobile_header in the Hooks Element module.