Archived topic
Disable header hero element on mobile
3 replies · Started by Kumara on March 7, 2022
Hi,
I'm using a header element to create a hero image with parallax. It's working well on desktop but it tends to slow down mobile page speeds. I'd like to create a different header element for mobile and am trying to use this snippet to disable the current element on mobile but can't seem to get this to work. Grateful for any suggestions.
add_filter( 'generate_header_element_display', function( $display ) {
if ( 65097 === $element_id && wp_is_mobile() ) {
$display = false;
}
return $display;
} );
Hi Kumara,
Try this to disable the element on mobile:
add_filter( 'generate_element_display', function( $display, $element_id ) {
if ( 65097 === $element_id && wp_is_mobile()) {
$display = false;
}
return $display;
}, 10, 2 );
And this to disable the new element on non-mobile deveices:
add_filter( 'generate_element_display', function( $display, $element_id ) {
if ( 65097 === $element_id && ! wp_is_mobile()) {
$display = false;
}
return $display;
}, 10, 2 );
Replace the element ID with the new header element.
Let me know if this helps :)
Thanks so much Ying!
This works perfectly.
You are welcome :)