[Charlie CParticipant]

Hi, just wondering where I would put the css to swap the logo image for tablet and mobile. Thanks

[KoryKeymaster]

Hey Charlie,

Thanks for writing in! You can’t swap the image out using a media query, but you can alter the size of the image using a media query, like so:

@media(max-width: 767px) {
  .x-brand.img {
    width: 100px;
  }
}

Thanks!

[Charlie CParticipant]

Hi, that worked really well for tablet. Thanks so much. The trouble is that the logo is a ridiculously long one (not my choice). Would there be any way of removing the logo image on mobile viewport and instead un-hiding the original h1 that I see has been visually hidden?

Thanks again

[RubinKeymaster]

Hey Charlie,

you can do that however you would need to overwrite a template file so you will first need to install a child theme since the h1 tag is nested into a visually-hidden div which is preventing it from displaying.

[Charlie CParticipant]

Hi, I’ve installed a child theme. Where would I make the change to the h1 tag please? Thanks

[KoryKeymaster]

Hey Charlie,

You will need to copy over the /x/framework/views/global/_navbar.php file in your parent theme to your child theme at the exact same path. There are more detailed instructions on how to go about this in the Knowledge Base should you need them. Next, I would replace lines 21-24:

<?php if ( is_front_page() ) : echo '<h1 class="visually-hidden">' . $get_name . '</h1>'; endif; ?>
<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>" title="<?php echo $get_description; ?>">
  <?php echo ( $x_logo == '' ) ? $get_name : '<img src="' . $x_logo . '" alt="' . $get_description . '">'; ?>
</a>

With the following:

<a href="<?php echo home_url( '/' ); ?>" class="x-brand img hidden-phone" title="<?php echo $get_description; ?>">
  <?php echo '<img src="' . $x_logo . '" alt="' . $get_description . '">'; ?>
</a>
<a href="<?php echo home_url( '/' ); ?>" class="x-brand text visible-phone" title="<?php echo $get_description; ?>">
  <?php echo $get_name; ?>
</a>

This outputs your “logo” in two fashions (i.e. image and text) using the native classes for the theme. Also, note the hidden-phone and visible-phone classes added to each. Next, add the following CSS to the style.css file of your child theme:

@media (max-width: 480px) {
  .x-brand.hidden-phone {
    display: none;
  }

  .x-brand.visible-phone {
    display: block;
  }
}

@media (min-width: 481px) {
  .x-brand.hidden-phone {
    display: block;
  }

  .x-brand.visible-phone {
    display: none;
  }
}

This will show/hide these elements as needed at certain breakpoints. Adjust these values as needed and you should be good to go.

Thanks!

[Charlie CParticipant]

That worked a treat. Thanks so much!

[RubinKeymaster]

You’re welcome!

[Author]

Posts