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 your main 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.

Once you enable the mobile header, more options will appear below it:

You can upload a mobile header logo, which should be quite small – kind of like an icon for your website.

Then you can choose whether your mobile header is sticky or not. If you enable the sticky option, your mobile header will glue itself to the top of your screen as you scroll down your website.

Adding HTML Inside the Mobile Header

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

This requires you to add a function will hook your content into the mobile header area.

add_action( 'generate_inside_mobile_header','tu_mobile_header_html' );
function tu_mobile_header_html() { ?>
    <div class="mobile-header-content">
        Your mobile header HTML in here
    </div>
<?php }

Learn how to add PHP here.

Then you can style your custom mobile header content with some CSS:

.mobile-header-content {
    float: right; /* etc.. */
}

Learn how to add CSS here.