Reduce white space on Supply Theme

Solved
New Member
2 0 0

Hello,

 

I need help understanding how to reduce the amount of white space between the logo and the Main menu area, see red arrow below.

 

11-7-19.JPG

 

Thank you for your help in advance.

IG

0 Likes

Success.

Shopify Staff
Shopify Staff
398 73 144

Hey, @img1!

 

Jason here from Shopify Support. Thanks for the screenshot. There are a few questions needed to be answered before we can go ahead and edit the code.

 

  1. Do you have an idea of how much you'd like the white space to be reduced?
  2. Are you familiar with design languages such as HTML, CSS, JavaScript, and Liquid?
  3. Has your Supply theme been customized by a developer before?

 

The code you want to edit lives in the theme.scss.liquid file of your theme. Unlike other liquid files within this theme, you can't revert back to the previous version. This is why if you aren't familiar with design languages, it's best to let our Theme Support team help you with the edit. Bear in mind that if the theme had been customized by other designers, there is a chance that our Theme Support team rejects our request. If this does happen, I recommend you reaching out to Shopify Experts. One of the designers can help you out with a contracted fee.

 

Just in case this is the route you'd like to our Theme Support team to help you with this customization, I've sent an authenticated email to you at ticket #14897239. Kindly reply to the ticket with the approximate reduction you have in mind. I'd be happy to forward your request to the team.

 

If you're comfortable with edit the code by yourself, you can add the following code to the theme.scss.liquid file. You can access the file by the following steps:

 

  1. Go to admin > Online Store > Themes > Actions > Edit code
  2. In the Assets folder, click on theme.scss.liquid
    07_03-dafri-lbeu2
  3. Paste the following code on the very bottom of this file:
    header.site-header {
    padding: 0;
    }
    This helps you remove the code later on if it doesn't work as planned.
    08_47-xvcav-oe1wx
  4. Click Save
    08_53-8i228-dwj1f

This code will completely remove the white space in the area, instead of reducing it. Feel free to adjust the 0 value to 1 or higher to increase the white space. Keep in mind that if the theme had been customized before by others, this method may not work.

 

I hope this information helps. Should you have any questions, don't hesitate to reply back here and I'd be happy to help out!

 

All the best,
Jason

Jason | Social Care @ Shopify
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it Accept as Solution to help others locate the answer!
Your Like and Accept as Solution are much appreciated!
To learn more visit the Shopify Help Center, or the Shopify Blog.

0 Likes
Shopify Partner
2116 353 444

Hi @img1 

Add this css that remove white space from just between logo and main menu:

Add in Asset->theme.scss file at bottom

 header.site-header {padding-bottom: 0;}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
2 0 0

Thank you Jason, I tried this and it did not work, unfortunately.

I have replied to the email with the ticket number.

 

Thank you,

IG

0 Likes
Highlighted
Shopify Staff
Shopify Staff
398 73 144

Hi, IG (@img1)!

 

So nice hearing from you and thanks for trying! I've gone ahead and forward your request to our Theme Support team. One of my colleagues will reach out to you directly via email. Keep an eye out on the inbox/spam/junk folder. Thanks!

 

Best,

Jason

Jason | Social Care @ Shopify
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it Accept as Solution to help others locate the answer!
Your Like and Accept as Solution are much appreciated!
To learn more visit the Shopify Help Center, or the Shopify Blog.

0 Likes