Change Logo for smaller screens

Dear Aigars

Thank you for this theme. It looks great.

I’ve got a question about the header logo. I managed to resize it for smaller screens mike iPhone screen by using the @media code in child theme, as you advised in another thread in this forum.

But i wondered i it’s possible to use a different logo for smaller screens. For example: Screen size bigger 768px use “full logo 1”, screen size smaller than 768px use “different logo 2”.

Is that possible?

Thanks alot for your answer in advance.

below you can find example where I used to replace website title (not logo but title) with 3 different logos.

.navbar-brand {
    color: transparent !important;
}

@media (min-width:769px){
    .site-name a {
        background-image: url(link/to/main/logo.png);
    }
}

@media (max-width:768px){
    .site-name a {
        background-image: url(link/to/tablet/logo.png);
    }
}

@media (max-width:480px){
    .site-name a {
        background-image: url(link/to/mobile/logo.png);
    }
}

This is just general example and you need to make it work in your case as all sites are different. The things that you will have to deal:

  1. Image is applied as background, so it is as big as its foreground element. You will see what I mean by that when you will setup it.
  2. Image will not be responsive the same way because it is now a background and not an actual element.

So this can be done but it might take some time tweaking it.