Different logo for mobile

Developer help
1

I want a different logo on the computer and a different logo on the mobile. How can I do it?

Theme I use: Casper

2

In Casper, open the default.hbs file

 <a class="gh-head-logo" href="{{@site.url}}">
 {{#if @site.logo}}
 <img src="{{@site.logo}}" alt="{{@site.title}}" />
 {{else}}
 {{@site.title}}
 {{/if}}
</a>

That code used for the logo.

If you want to use a different logo then you can add the new logo code there and make it responsive by css media queries. Just show the new code part in mobile and hide gh-head-logo in mobile.

For example :

 <a class="gh-head-logo" href="{{@site.url}}">
 {{#if @site.logo}}
 <img src="{{@site.logo}}" alt="{{@site.title}}" />
 {{else}}
 {{@site.title}}
 {{/if}}
</a>
<a class="gh-head-mobile-logo" href="{{@site.url}}" >
<img src="NEW_LOGO_URL" alt="{{@site.title}}" />
</a>

And use the following css,

.gh-head-mobile-logo {
display:none;
}
@media (max-width: 900px) {
.gh-head-mobile-logo {
display:block;
}
.gh-head-logo {
display:none;
}
}