Supply Theme - change header size

[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 

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

[Winnie_Hoo]

Hello, Thanks for your sharing.

But I am not sure which liquid file to edit?

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