Docs

[mberning_999]

I am trying to replace the horizontal logo image for a.x-brand img on views below 720 to a square logo image.

I have tried calling a different img via css through content: url(“”);
Is this something I need to edit in the Child Theme? Any help or direction is greatly appreciated.

[Rupok]

Hi there,

It would be better if you add this with Child Theme.

You need to create the file /x/frameworks/views/global/_brand.php with this code :

<?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 . '">';

?>

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

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

<a href="<?php echo home_url( '/' ); ?>" class="logo-mobile" title="<?php echo $site_description; ?>">
  <img src="http://path/to/your/mobile-logo.png">
</a>

Change http://path/to/your/mobile-logo.png with your uploaded square image link.

Then add this under Custom > CSS in the Customizer.

.logo-mobile{
  display: none;
}

@media only screen and (max-width: 720px) {
.logo-mobile{
  display: block;
}

.x-brand{
  display: none;
}

}

Hope this helps.

Cheers!

[mberning_999]

Prefect. Thanks Rupok!!

[Joao]

Glad to hear it.

Joao

[Author]

Posts