Snippets

Snippet: Disable Logo on Mobile

  • Updated:

There are 2 methods to disable the logo on mobile. You can either hide it via CSS or you can insert a custom classname to the logo so it becomes hidden on mobile. Here are both examples. Make sure you copy/paste only the code you need and that it's added in the correct location (CSS goes in Theme Panel > Custom CSS or in your child theme's style.css file and the PHP code would go in your functions.php file or a 3rd party snippets plugin)

/* CSS METHOD - allows for greater control as you can change the max-width to the pixel value you want exactly for the point in which the logo will hide */
@media only screen and (max-width: 959px) {
    #site-logo { display: none !important; }
}

/* PHP METHOD - by adding classes to the logo element */
add_filter( 'totaltheme/header/logo/wrapper_class', function( $classes ) {
	$classes[] = 'visible-desktop';
	return $classes;
} );
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)
Back To Top