Reduce white space on Supply Theme

[img1]

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.

Thank you for your help in advance.

IG

[JasonC · Accepted solution]

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
   
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.
   
4. Click Save
   
   

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

[Jasoliya]

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

[img1]

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

[JasonC]

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