Shopify themes, liquid, logos, and UX
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?
Solved! Go to the solution
This is an accepted solution.
This is white space cropped logo.
Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.
sw-coast-weymouth-2.myshopify.com
if you have front end password is confidential so please to a personal message as you like.
I have removed the password now so you should be able to access.
Thakns allo good
can you please resize logo on admin also add below code
.site-header { padding-bottom: 0; }
Hi,
I have never really edited code before so excuse the ignorance. Where do I place this bit of code please?
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; }
This hasnt provided a solution - please see my site now. the header is only marginally smaller with vast amounts of white space.
Thanks for update.
can you please provide exactly issue screenshot so i will provide proper code.
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)
This is an accepted solution.
This is white space cropped logo.
Thank you! This worked great for me
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
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/
Thanks for post sorry i can't see any issue can you please how me
Thanks for your reply. Someone like you helped me in evening.
Great Thanks for update and support.
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
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;}
}
Hi,
Just wanted to say thank you for this code, because it helped me to resolve my issue with the header sizing. Thanks @KetanKumar
it's my pleasure to help us
I don't see that file in Asset folder. Could you please check and guide where do I paste the code
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.
Will this code also work to make my header smaller?
Also what would be the best size of a logo for the header if i wanted to have a rectangular banner?
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;}
it's my pleasure to help us
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?
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.
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 🙂 🙂 😉
if are you able to code try metatag
https://shopify.dev/api/liquid/objects/metafield
sorry for that issue please share more details DM
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
can you please just used search icon
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
Hello, Thanks for your sharing.
But I am not sure which liquid file to edit?
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024