Site-Branding 2 diferent images


I was wondering if it is possible to use 2 different images for the “site-branding” logo, deppending on the size of the screen.

Actually i have one “horizontal” image, but for small sizes of screen i would prefer a “vertical” configuration. But i can find a way to define two diferent images.

Is there a way for doing this? :slight_smile:



You can add an other image as logo using this Custom CSS:

@media only screen and (max-width: 768px) {
.site-branding {
    min-height: 80px;
    margin-left: 30px;
    background-image: url("your-small-screen-logo-url-here");
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;

.site-logo {
    display: none !important;

Add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,

Done! Thanks! :slight_smile:

I changed a few things, it works as i wanted now. Thanks again! :slight_smile:


Great! You’re most welcome! I’m glad it’s working. If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,