Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Header Logo resizing

Solved

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

ukitu
Excursionist
13 0 5

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

Accepted Solution (1)
KetanKumar
Shopify Partner
37409 3659 12113

This is an 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;
}

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 10 (10)

KetanKumar
Shopify Partner
37409 3659 12113

@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.

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ukitu
Excursionist
13 0 5

Hi Ketan

 

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

 

thanks for you help

KetanKumar
Shopify Partner
37409 3659 12113

@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;
}

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ukitu
Excursionist
13 0 5

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
Shopify Partner
37409 3659 12113

@ukitu 

yes please give me screenshort

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ukitu
Excursionist
13 0 5

Header space editHeader 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
Shopify Partner
37409 3659 12113

This is an 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;
}

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ukitu
Excursionist
13 0 5

Thank you! 

That did the trick

KetanKumar
Shopify Partner
37409 3659 12113

@ukitu 

its my pleasure to help us 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AlexBrowe2
New Member
18 0 0

@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

 

IMG-2584.jpg