Snippets: Use Custom Template as Header for Desktop Only

The Total "header builder" function replaces the entire header function as it's more efficient this way, but if you want you can actually use a little code to insert a custom template to be used as your header which would be visible on desktop only and then have the default theme header visible on mobile.

Important Notice: If you need this header to be sticky then you would have to actually use wpex_hook_header_top instead of wpex_hook_header_before in the first function. And then remove the second function and instead use CSS to hide the "#site-header-inner" element on desktops as there isn't a filter you can use to tweak the header-inner classes at this time.

// Add custom header above default header
add_action( 'wpex_hook_header_before', function() {
	$template_id = 6874; // replace this with your header template
	echo '<div class="hide-at-mm-breakpoint clr">' . do_shortcode( '[templatera id="' . $template_id . '"]' ) . '</div>';
}, 5 );

// Alter default header classes so it displays on mobile only
add_filter( 'wpex_header_classes', function( $classes ) {
	$classes[] = 'show-at-mm-breakpoint';
	return $classes;
} );