Docs

[yovo_cgn]

Hi,
i would like to display
header1.png
on full-screens like desktop

And once you visit the webside from mobile (smaller screens),
i would like to display
header2.png

How can I do this?
Thx in advance

[yovo_cgn]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! Because what you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once 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.
// =============================================================================

$site_name        = get_bloginfo( 'name' );
$site_description = get_bloginfo( 'description' );
$logo             = x_make_protocol_relative( x_get_option( 'x_logo' ) );
$site_logo        = '<img src="' . $logo . '" alt="' . $site_description . '">';

$logo_2           = 'http://placehold.it/50x50';
$site_logo_2      = '<img src="' . $logo_2 . '" alt="' . $site_description . '">';

?>

<?php echo ( is_front_page() ) ? '<h1 class="visually-hidden">' . $site_name . '</h1>' : ''; ?>

<a href="<?php echo home_url( '/' ); ?>" class="x-hide-sm x-hide-xs <?php x_brand_class(); ?>" title="<?php echo $site_description; ?>">
  <?php echo ( $logo == '' ) ? $site_name : $site_logo; ?>
</a>

<a href="<?php echo home_url( '/' ); ?>" class="x-hide-xl x-hide-lg x-hide-md <?php x_brand_class(); ?>" title="<?php echo $site_description; ?>">
  <?php echo ( $logo_2 == '' ) ? $site_name : $site_logo_2; ?>
</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/views/global/

Your header one can be added in the customizer hence the default header logo image. The second version can be hard code in the given code above. Simply replace the image path in the line:

$logo_2           = 'http://placehold.it/50x50';

We would loved to know if this has work for you. Thank you.

[yovo_cgn]

THX!
works like a charm

[Nabeel A]

Glad we could help.

Cheers!

[Author]

Posts