How can I enlarge my logo size in the Venue Theme?

Store Design
1

Hello,

I want to increase the size of my logo in the header. I went to Header>Settings>Custom Logo Width and maxed out the width at 400px and it didn’t make my logo any bigger. Here’s my site: justjustbaby.com

Any help would be appreciated.

Thank you!

1 Like
2

Hi @kooger21 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/main.scss->paste below code at the bottom of the file:
@media (min-width: 1024px) {
.header__logo-img {
    max-height: unset !important;
    max-width: 400px !important;
    margin-top: -45px;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

3

@kooger21

can you please share header code so i will update

4

Hi thanks, it makes it bigger when viewing on my laptop / desktop computer but it doesn’t make it bigger on a mobile device, how can i get it to do it on a mobile / cell? thanks

5

I tried the solution above and it makes it bigger on my laptop / desktop but not mobile, how do i share header code? thanks

6

Hi @kooger21 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/main.scss->paste below code at the bottom of the file:
@media (max-width: 767px) {
    .header__logo-img {
        height: 75px;
        object-fit: cover;
        width: 180px;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

7

Thanks using this indeed has made it bigger on mobile but smaller again on my laptop / desktop - i need it to be bigger on both mobile and desktop? thank you

8

Hi @kooger21 ,

you can add 2 of my code at the same time. 1 piece of desktop code, 1 piece of mobile code in main.scss file:

@media (min-width: 1024px) {
.header__logo-img {
    max-height: unset !important;
    max-width: 400px !important;
    margin-top: -45px;
}
}

@media (max-width: 767px) {
    .header__logo-img {
        height: 75px;
        object-fit: cover;
        width: 180px;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
9

Brilliant, thank you