Prestige Theme - Change Size of Logo in Header?

[woodwardandfox]

Hi, 

Kind of new to coding on Shopify but have successfully cut and pasted several changes with other issues. 

I would like to increase the logo width size on both Mobile and Desktop. 

I am using Prestige theme and the maximum size of the PNG they allow is 200 x 60px. 

Can someone help and tell me how what exactly i need to change in the code to do this? 

my url is 

woodwardandfox.com

password is rankin

Thank you 

[KetanKumar · Accepted solution]

@woodwardandfox 

yes i will fix first duplicate theme 

https://help.shopify.com/en/manual/your-account/staff-accounts/create-staff-accounts

[KetanKumar · Accepted solution]

@woodwardandfox 

great, Thanks yes i have sent please check and let me know so i will check code and fix 

[KetanKumar]

@woodwardandfox 

Sorry for facing this issue, it's my pleasure to help us.

i have checked but sorry i can't see the logo current text base logo can you please show me 

[woodwardandfox]

Hello. So sorry. I was playing around with it yesterday and forgot to put it back. No one ever answers my posts so didn’t expect a reply 🙂

Thank you for looking.

[KetanKumar]

@woodwardandfox 

no rush

so do you need help?

[woodwardandfox]

Yes please!

[KetanKumar]

@woodwardandfox 

Thanks for it 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (max-width: 640px) {
.Header__LogoImage {
    max-width: 150px !important;
}
}

[woodwardandfox]

hi @KetanKumar 

Okay So I duplicated my theme and added the code you suggested. 

It doesnt seem to change the desktop version, but I think it changed the mobile size. But i am struggling to tell. Dont really know what I am looking for if that makes sense. 

Here is a screenshot of the new mobile version with your code. 

 The desktop has stayed the same size as the live website now. 

[KetanKumar]

.Header__LogoImage {
    max-width: 160px !important;
}

@woodwardandfox 

Thanks 

[woodwardandfox]

@KetanKumar  @MS-WEB-DESIGNER 

this is what i what i am looking for. 

I made this on photoshop. 

praying someone knows how to do this... 🙂

[KetanKumar]

@woodwardandfox 

yes, can you please upload same as logo file so i will guide CSS code if any required 

[woodwardandfox]

@KetanKumar 

Hi, so ive created and uploaded a new version of logo with the recommended logo size of 200 x 60 pixels. 

I wasnt sure what size to make the image but I uploaded it as a png. 

Hoping you can somehow get it to work for me 🙂 

thank you 

[KetanKumar]

@woodwardandfox 

Thanks but it's too smaller 

can you please upload the logo 600x40 remove top and bottom blank spacing 

[woodwardandfox]

Hi @KetanKumar 

I have uploaded a new logo with the size you requested - 600 x 40. 

Hope this works. Thanks again! 

[KetanKumar]

@woodwardandfox 

thanks for it's not update your logo 

now it's to smaller please check 

or can you please add me to staff account so I will quick fix 

[woodwardandfox]

hi 

thanks for the offer. 

How do I add you? 

Also - would you be able to do it on a duplicate theme? as I am too scared in case something goes wrong. I will create a KatanKumar duplicate theme 🙂 

[KetanKumar · Accepted solution]

@woodwardandfox 

yes i will fix first duplicate theme 

https://help.shopify.com/en/manual/your-account/staff-accounts/create-staff-accounts

[woodwardandfox]

hi... what is your email? 

[woodwardandfox]

isnt it easier to just do Collaborator Access as your a shopify partner?

[KetanKumar · Accepted solution]

@woodwardandfox 

great, Thanks yes i have sent please check and let me know so i will check code and fix 

[woodwardandfox · Accepted solution]

@KetanKumar 

hiya, i have accepted it! thank you ! 

[KetanKumar]

@woodwardandfox 

i have done this please check

[Vittoriog]

Hi I have the same problem and still can't resolve it. Can you help me please?

[KetanKumar]

@Vittoriog 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[marco645]

hello i also used the code you wrote above, it works everything is perfect. The only problem is that in the checkout the logo still remains small, I refer to mobile. Do you have a code to enlarge the logo also in the checkout?

[nj_martha]

Hi @KetanKumar, I'm facing the same issue. I made my logo image 600x40px like you said, but now the header is smaller like I want but I can't see the logo. Can you please help me fix this issue?

[MS-WEB-DESIGNER]

Dear @woodwardandfox 

Hope it will help

• From your Shopify admin, go to Online Store > themes.
• Locate your current theme and then click Actions > Edit code.
• After that in the Assets folder, click to open your theme.scss.liquid file.
• Go to the very bottom of this file and paste the following code:

/* Start */
@media screen and (min-width: 641px) {
 	.Header__LogoImage { max-width: 75%; }
}
@media screen and (max-width: 640px) {
.Header__LogoImage { max-width: 135px; }
}
/* End*/

• Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
• Save and check your theme by refreshing it.

If you still need help you can contact us by using the link or email given at signature.

[woodwardandfox]

hi, @MS-WEB-DESIGNER 

thanks for this. I have tried but it didnt change anything... on mobile or desktop. 

[luminail]

it works !