Set a Template as Header on Mobile Devices

This snippet hides the default header on mobile devices and displays a custom Dynamic Template as the mobile header. If you use this snippet, it's recommended that you disable the Header Builder in the Theme Panel to prevent confusion.

// Hide default header on mobile
add_filter( 'totaltheme/header/wrapper_class', function( $classes ) {
	$classes[] = 'hide-at-mm-breakpoint';
	return $classes;
} );

// Insert custom mobile header template
add_action( 'wpex_hook_wrap_top', function() {
	$mobile_header = do_shortcode(
		'[wpex_template id="5456"]' // replace with your template shortcode
	);
	$sticky = false; // set to true if you want the mobile header to be sticky
	if ( $mobile_header ) {
		if ( $sticky ) {
			echo '<div class="wpex-surface-1 wpex-sticky">';
		}
		echo '<header class="show-at-mm-breakpoint container">' . $mobile_header . '</header>';
		if ( $sticky ) {
			echo '</div>';
		}
	}
}, 15 );

All PHP snippets should be added via child theme's functions.php file or via a plugin.
We recommend Code Snippets (100% Free) or WPCode (sponsored)

Related Snippets

This snippet was last updated on November 7, 2025