Supply Theme - change header size

Solved
emmakkk
Tourist
5 0 4

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?

Accepted Solution (1)

Accepted Solutions
Pankaj_Gupta
Shopify Partner
155 21 25

This is an accepted solution.

@emmakkk 

This is white space cropped logo.


logo.png

If It solves your problem, Please Like and Accept Solution.
Do you need Shopify customization and custom work on your store? Hire me.
Feel free to Contact me on pankajtechcode@gmail.com

View solution in original post

Replies 37 (37)
KetanKumar
Shopify Partner
32385 3255 10811

@emmakkk 

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

If helpful then please Like and Accept Solution.
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
emmakkk
Tourist
5 0 4

sw-coast-weymouth-2.myshopify.com

KetanKumar
Shopify Partner
32385 3255 10811

@emmakkk 

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

If helpful then please Like and Accept Solution.
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
emmakkk
Tourist
5 0 4

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

 

KetanKumar
Shopify Partner
32385 3255 10811

@emmakkk 

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

.site-header {
padding-bottom: 0;
}
If helpful then please Like and Accept Solution.
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
emmakkk
Tourist
5 0 4

Hi,

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

KetanKumar
Shopify Partner
32385 3255 10811

@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;
}
If helpful then please Like and Accept Solution.
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
emmakkk
Tourist
5 0 4

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

 

KetanKumar
Shopify Partner
32385 3255 10811

@emmakkk 

Thanks for update.

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

If helpful then please Like and Accept Solution.
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
Pankaj_Gupta
Shopify Partner
155 21 25

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.

 

logo.png

 

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

.header-logo {
      margin: 15px 0 0;
If It solves your problem, Please Like and Accept Solution.
Do you need Shopify customization and custom work on your store? Hire me.
Feel free to Contact me on pankajtechcode@gmail.com
Pankaj_Gupta
Shopify Partner
155 21 25

This is an accepted solution.

@emmakkk 

This is white space cropped logo.


logo.png

If It solves your problem, Please Like and Accept Solution.
Do you need Shopify customization and custom work on your store? Hire me.
Feel free to Contact me on pankajtechcode@gmail.com
ZoeLogan
New Member
1 0 0

Thank you! This worked great for me 

earthstore
Tourist
6 2 2

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
Shopify Partner
32385 3255 10811

@earthstore 

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

If helpful then please Like and Accept Solution.
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
earthstore
Tourist
6 2 2

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

 

KetanKumar
Shopify Partner
32385 3255 10811

@earthstore 

Great Thanks for update and support.

If helpful then please Like and Accept Solution.
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
Winnie_Hoo
New Member
2 0 0

Hello, Thanks for your sharing.

But I am not sure which liquid file to edit?

Zeeshan1995
New Member
1 0 1

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
Shopify Partner
32385 3255 10811

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

 

If helpful then please Like and Accept Solution.
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