What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Supply Theme - change header size

Solved

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

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)
Pankaj_Gupta
Shopify Partner
155 21 26

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 38 (38)

KetanKumar
Shopify Partner
37433 3664 12119

@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. 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
emmakkk
Tourist
5 0 4

sw-coast-weymouth-2.myshopify.com

KetanKumar
Shopify Partner
37433 3664 12119

@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. 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
emmakkk
Tourist
5 0 4

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

 

KetanKumar
Shopify Partner
37433 3664 12119

@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. 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
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
37433 3664 12119

@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. 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
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
37433 3664 12119

@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. 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
Pankaj_Gupta
Shopify Partner
155 21 26

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 26

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
Visitor
1 0 0

Thank you! This worked great for me 

Imankaawach
Tourist
11 0 1

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
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
37433 3664 12119

@earthstore 

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

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
earthstore
Tourist
6 2 2

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

 

KetanKumar
Shopify Partner
37433 3664 12119

@earthstore 

Great Thanks for update and support.

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
Zeeshan1995
Visitor
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
37433 3664 12119

@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. 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
gacho22
Tourist
3 0 2

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
Shopify Partner
37433 3664 12119

@gacho22 

it's 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
athark20
Visitor
1 0 1

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

KetanKumar
Shopify Partner
37433 3664 12119

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

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
Josie_adopt
Tourist
6 0 4

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
Shopify Partner
37433 3664 12119

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

 

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
Josie_adopt
Tourist
6 0 4
Perfect, thank you
KetanKumar
Shopify Partner
37433 3664 12119

@Josie_adopt 

it's 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
FrederikMichiel
Tourist
10 0 6

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
Shopify Partner
37433 3664 12119

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

 

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
FrederikMichiel
Tourist
10 0 6

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
Tourist
6 0 4
Hi, thank you!

www.adoptabong.com
KetanKumar
Shopify Partner
37433 3664 12119

@Josie_adopt 

if are you able to code try metatag 

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

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
Josie_adopt
Tourist
6 0 4
I am unfamiliar with any coding to figure that out.
KetanKumar
Shopify Partner
37433 3664 12119

@Josie_adopt 

sorry for that issue please share more details DM 

 

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
ModernDeco
Visitor
1 0 1

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
Shopify Partner
37433 3664 12119

@ModernDeco 

can you please just used search icon

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
jeffstar
Visitor
1 0 0

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
Visitor
2 0 0

Hello, Thanks for your sharing.

But I am not sure which liquid file to edit?