How to maintain logo quality and reduce header margin on my website?

[ukitu]

Hi, I am having trouble with the header logo on my site. There two major problems Im running into are that quality and the size of the header. When I try to upload my logo (png file) the quality of the logo is severely decreased and the logo becomes pixelated. Also when I upload my logo my whole webpage is shifted down due to the large margin/border (not sure which one) in the header. Is there a way for me to reduce the border/margin in the header and how do I maintain the quality of my logo

Thank you

[KetanKumar]

@ukitu 

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.

[ukitu]

Hi Ketan

my website address is: https://dotyu.myshopify.com/

thanks for you help

[KetanKumar]

@ukitu 

yes please add this code

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

.logo__image-wrapper {
    max-width: 130px!important;
}

[ukitu]

Thanks for the reply and suggestion. I tried this and it didn't do what I was looking for. Luckily enough this helped me achieve what I was attempting to do!

 Really appreciate the help.

[KetanKumar]

@ukitu 

yes please give me screenshort

[ukitu]

Header space edit

Hi

Sent pic showing what I was referring to.  I was wondering how to reduce the space (marked in blue) between the logo and the menu items 

[KetanKumar · Accepted solution]

@ukitu 

thanks for details please try this code

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

.site-nav {
    margin-top: 0 !important;
}

[ukitu]

Thank you! 

That did the trick

[KetanKumar]

@ukitu 

its my pleasure to help us 

[AlexBrowe2]

@KetanKumar @KetanKumar @KetanKumar 

Hello Ketan 🙂

Please could you help me to make the logo appear on my page as it is in the image that I send you?

The problem is that if I increase the size of the logo, the size of the header also increases. Because the header keeps the logo inside, but we want them to be independent. In order to increase the size of the logo so that it protrudes a bit from the header.

What is the code and where do we have to modify to make the size of the logo and header independent?

Our page is: https://kongpods.com/

Thank you