How can I reduce white space at the base of the Supply Theme header?

[emmakkk]

Header in supply theme provides 'minimalist' header with plenty of white space around logo and main menu buttons. I have reduced the size of the header itself by inputting piece of code as described in another help forum post.

.site-header {height:150px;padding:0;
}

 I now want to reduce the amount of white space at the base of the header below the horizontal main menu buttons. How do I do this?

[KetanKumar]

@emmakkk 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

[emmakkk]

sw-coast-weymouth-2.myshopify.com

[KetanKumar]

@emmakkk 

if you have front end password is confidential so please to a personal message as you like.

[emmakkk]

I have removed the password now so you should be able to access.

[KetanKumar]

@emmakkk 

Thakns allo good
can you please resize logo on admin also add below code

.site-header {
padding-bottom: 0;
}

[emmakkk]

Hi,

I have never really edited code before so excuse the ignorance. Where do I place this bit of code please?

[KetanKumar]

@emmakkk 

Sorry for that

please flow this step

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

.site-header {
padding-bottom: 0;
}

[emmakkk]

This hasnt provided a solution - please see my site now. the header is only marginally smaller with vast amounts of white space.

[KetanKumar]

@emmakkk 

Thanks for update.

can you please provide exactly issue screenshot so i will provide proper code.

[Pankaj_Gupta]

Hi @emmakkk ,

I have checked your logo(https://cdn.shopify.com/s/files/1/0279/1237/2301/files/WEYMOUTH_S_1_360x.png?v=1593425996)

This logo has white space on top and bottom. I have uploaded white space cropped logo. Pls use this logo.

This is also added in your scss file(Online Store -> Actions-> Edit code -> Assets -> theme.scss.liquid)

.header-logo {

      margin: 15px 0 0;

}

May be this will solve your problem.

[Pankaj_Gupta · Accepted solution]

@emmakkk 

This is white space cropped logo.

[ZoeLogan]

Thank you! This worked great for me 

[Imankaawach]

Hi there,

I tried the above code and it is not working for me could you please help me? my URL: www.shopanisa.ca

 Thanks in advance

Shopanisa | Tendances An-Nisa

[earthstore]

Hii, sir I need to reduce size of header logo. I have tried many codes but didn't work please help. Please check in mobile view, header looks big in mobile.

here is URL https://earthstore.in/

[KetanKumar]

@earthstore 

Thanks for post sorry i can't see any issue can you please how me

[earthstore]

Thanks for your reply. Someone like you helped me in evening.

[KetanKumar]

@earthstore 

Great Thanks for update and support.

[Zeeshan1995]

I have the same issue my header size is quite big, it looks bad in mobile phones. can you please provide me with the code to reduce the header size. my site is www.quickhacks.in 

[KetanKumar]

@Zeeshan1995 

sorry for this issue

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

@media only screen and (max-width: 768px) {
.site-header{padding: 0px;}
}

[gacho22]

Hi,

Just wanted to say thank you for this code, because it helped me to resolve my issue with the header sizing. Thanks @KetanKumar 

[KetanKumar]

@gacho22 

it's my pleasure to help us

[athark20]

I don't see that file in Asset folder. Could you please check and guide where do I paste the code

[KetanKumar]

@athark20 

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.

[Josie_adopt]

Will this code also work to make my header smaller?

www.adoptabong.com

Also what would be the best size of a logo for the header if i wanted to have a rectangular banner?

[KetanKumar]

@Josie_adopt 

sorry for this issue can you 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-header {padding: 2px 0;}

[Josie_adopt]

Perfect, thank you

[KetanKumar]

@Josie_adopt 

it's my pleasure to help us

[FrederikMichiel]

ive tried to copy and paste the code on my theme settings but nothing changed, i can share my url and see if maybe i need a different code?

[KetanKumar]

@FrederikMichiel 

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.

[FrederikMichiel]

Hi there! Thank you for your help! I was able to fix that but I’m struggling with another issue. I’m creating products on my website builder and I wanna have two separate descriptions. One next to the photo and one under which will be more detailed. Unfortunately, Shopify only provides one description table. You know how I can make two? Thank you 🙂 🙂 😉

[Josie_adopt]

Hi, thank you!

www.adoptabong.com

[KetanKumar]

@Josie_adopt 

if are you able to code try metatag 

https://shopify.dev/api/liquid/objects/metafield

[Josie_adopt]

I am unfamiliar with any coding to figure that out.

[KetanKumar]

@Josie_adopt 

sorry for that issue please share more details DM 

[ModernDeco]

Hi KetanKumar, I was trying to change the size of the header with this help but couldn't make it.

Site is: https://modern-decorative-art.myshopify.com/

Appreciate your help.

Thanks

[KetanKumar]

@ModernDeco 

can you please just used search icon

[jeffstar]

hi there,

im having the same problem my header height is too big, im trying to find timber.scss.liquid under asset but cant find it is it theme.scss.liquid

[Winnie_Hoo]

Hello, Thanks for your sharing.

But I am not sure which liquid file to edit?