Support » Theme: Hiero » I want to use different versions of my logo for desktop and mobile

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hello, you can try to do the following.

    1. Upload your horizontal logo image into your Media Library and copy its URL.

    2. Add this CSS code in the Customize → Additional CSS section (but replace the with your logo URL that you’ve copied):

    @media (max-width: 960px) {
        .site-branding {
            background-image: url(;
            background-repeat: no-repeat;
            background-size: contain;
        .site-branding img {
            opacity: 0;

    Please feel free to ask any other questions that you might have.

    Kind Regards, Roman.

    I had to adjust (max-width: 960px) to (min-width: 960px), but I did get the result that I wanted. Hallelujah and thank you!

    Next, I would like to know how I can make the logo take up more space on the desktop version. Right now it’s pretty small, and I would like it to be maybe about twice that size so it makes more of an impact.

    Also, any way I can reduce the amount of blank space between my site branding and the menu? (also in the desktop version) I looked around in my style.css but didn’t see anything referring to the size of the header section.

    Hello, you are welcome!

    Can you please create a separate topic for each of your additional issues in order to make it easier to help you?

    Kind Regards, Roman.

    Sorry about that!

    That’s okay, and thank you for understanding!

    By the way, it would be nice if you mark this topic as Resolved 🙂

    Kind Regards, Roman.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.