Add an extra image to header on large screens OR use one image on large screens and a different image on small ones

[bluekat]

I am somewhat familiar with code to change things based on screen size width. I want to add a second image to the right of the cat image in the header that will be displayed on larger screens.

Or, display one image in the header on large screens, but a different image on small screens.

[ruenel]

Hello @bluekat,

Thanks for writing in!

Since you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/GLOBAL/_BRAND.PHP
// -----------------------------------------------------------------------------
// Outputs the brand.
// =============================================================================

$option_logo_text = x_get_option( 'x_logo_text' );
$option_logo_src  = x_get_option( 'x_logo' );
$logo_text        = ( empty( $option_logo_text ) ) ? get_bloginfo( 'name' ) : $option_logo_text;

if ( empty( $option_logo_src ) ) {
  $logo_output = $logo_text;
} else {
  $logo_src    = x_make_protocol_relative( $option_logo_src );
  $logo_output = '<img src="' . $logo_src . '" alt="' . $logo_text . '">';
}

if ( x_get_option( 'x_logo_visually_hidden_h1' ) ) {
  echo '<h1 class="visually-hidden">' . $logo_text . '</h1>';
}

?>

<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?> cs-hide-lg cs-hide-xl">
  <?php echo $logo_output; ?>
</a>


<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?> cs-hide-md cs-hide-sm cs-hide-xs">
  add another image here
</a>

3] Save the file named as _brand.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/framework/legacy/cranium/headers/views/global/

The code above needs to be modification. You will have to insert your image as I have indicated with a text. That section will be displayed in larger screens and the current logo will be hidden.

Hope this helps.