Mobile logo not working with custom css

Hi Gerardo!

It looks like your site does not have an element with id="logo" . For this reason, the CSS that you shared has no effect.

Is this the logo that you’d like to change? 👇

If yes, then the HTML of this logo is the following:

<img src="https://www.to-bark.com/wp-content/uploads/2018/04/logo-completo-con-rilievo.png" class="jet-logo__img" alt="To-Bark" width="504" height="140">

You could update the CSS to this:

@media only screen and (max-width: 981px) {
  img.jet-logo__img {
    content: url("http://yourwebsite.com/mobile_logo.png");
  }
}

Then, it would work to update your logo.

However, ideally, you could use a <picture> element to achieve what you want with just HTML. Take a look at this example:

<picture>
    <!-- When the screen is narrower than 981px, load small.jpg -->
    <source srcset="path/to/small.jpg" media="(max-width: 981px)">
    <!-- Default image for screens wider than 981px -->
    <img src="path/to/large.jpg" alt="Descriptive text">
</picture>

1. HTML Structure: Instead of using a regular <img> tag, use the <picture> element. This element works with one or more <source> elements and an <img> element as a fallback.
2. CSS Media Queries: You define different srcset attributes for each <source> element, which are then activated based on media queries.

The “small” logo from your site (https://www.to-bark.com/wp-content/uploads/2023/11/testlogomobile.png) seems to have an intrinsic width of 150px.

You could try adding an explicit width to your logo in CSS. For example:

@media only screen and (max-width: 981px) {
  img.jet-logo__img {
    content: url("http://yourwebsite.com/mobile_logo.png");
    width: 150px;
  }
}