How to change the logo and its class for the mobile version of the site?

Question

CMS

Hello. Having this static logo layout:

<div class="logo">
            <a href="/">
              <img src="images/logo-xs.png" alt="logo" class="visible-xs visible-sm" />
              <img src="images/logo.png" alt="logo" class="hidden-xs hidden-sm" />
            </a>
          </div>

How to make it dynamic?
In functions.php I wrote:

function fin_setup() {
   add_theme_support( 'custom-logo', array(
      'height'      => 68,
      'width'       => 138,
      'flex-width'  => true,
      'flex-height' => true,
    ) );
}
add_action( 'after_setup_theme', 'fin_setup' );

To add classes, I tried to register a filter:

add_filter( 'after_setup_theme', 'change_logo_class' );


function change_logo_class( $html ) {

    $html = str_replace( 'custom-logo', 'visible-xs visible-sm', $html );

    return $html;
}

but it did not work. Where did I make a mistake? And what is responsible for changing the src and logo class when switching to the mobile version?

Answer 1

Media queries were invented for this... You can make a logo the background of a block or 2 logos and display the one you need, but it's probably better to make it the background of a block.

Answer 2

Just write the condition
if(screen.width <= 600) {
Run if the size is less than or equal to 600
};
if(screen.width >= 601) {
Execute if size is greater than or equal to 601
};
+
$('.filter-items:first-child').addClass('active').removeClass('');