How can I adjust header spacing and padding in the Brooklyn theme?

Topic summary

Adjusting excessive spacing/padding in Shopify themes, mainly Brooklyn, was mostly solved with small CSS edits in theme files. The original issue—too much space between the menu, video/header, and first page section—was fixed by adding CSS to remove the top margin of the first homepage section in theme.scss.liquid.

Key fixes shared:

  • Homepage/header spacing: set the first section’s top margin to 0.
  • General section and newsletter spacing: reduced section margins, header bottom margins, and newsletter padding.
  • Collection page spacing: in timber.scss.liquid, reduced .section-header margin and removed top padding from main.main-content.
  • Mobile-only product image width: expanded image/container width to 100%, then removed the gap below the logo with a mobile media query.
  • Logo overlap on banner images: adjusted logo position separately for desktop and mobile.

Several users confirmed these CSS fixes worked. Some related issues—broken menus after removing an app, slideshow/image cropping, logo/menu layout changes, and video header setup—were either resolved separately, moved to private messages, or remained open. Screenshots were important for clarifying layout problems.

Summarized with AI on March 6. AI used: gpt-5.4.

Hi there! I am trying to figure out how to remove the large amounts of padding between the menu and the looping video and then the header underneath on my home page. I also do not like how much room there is between the header and first section of any of my pages (example: the About Me page). Is this a Heading/Header setting? There are larger amounts of space between most of my headers and body text. I have tried a couple fixes from other discussion forums but none have worked so far so I don’t think I was placing the right code in the right section. Thanks in advance for your help!

Website: https://jessmylife.com

1 Like

Hello, @jessmylife

Welcome to the Shopify community!
and Thanks for your Good question.

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.index-sections .shopify-section:first-child:not(.shopify-section--full-width) {
    margin-top: 0;
}
1 Like

That worked - thank you very much!

1 Like

@jessmylife

Thanks for update and your compliment.

1 Like

Hi

I have similar problem. I wanted to change the mega menu structure with the globo mega menu app. I unpublish and removed it because the app’s dimensions do not fit. Later, the old menu structure was broken. All the menu components started to come to the homepage vertically.

It normally included main topics and submenus horizontally. After it broken, all header / items started to come up vertically.

Could anyone help me?

Thanks

1 Like

Hello, @cen9izh4n

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

Hi @KetanKumar ,

I’m very new here! I can see that you pretty much know everything about Shopify! Help!! :innocent:

I’m not having any luck with resolving these problems I have with Brooklyn theme:

  • reducing padding around rich-text
  • reducing padding around featured sections/slide shows etc
  • reducing the space around the header
  • enlarging the size of the logo for a mobile device and web as it is so small (logo dimensions(px) are: 900x200)
  • images fitting the slideshows and not being cropped. (images are 1000x1000px)

Thank you in advance!

Kind regards

brad

1 Like

Hello, @mytwoheads

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

Thanks - Can I send you link and password privately, please?

I’ve sent you an email with details of URL and password.

Happy for you to share the solutions here, just not the URL or password.

Thanks

Brad :folded_hands:t3: :folded_hands:t3: :folded_hands:t3:

Hi Ketan,

You got my email with URL and login details

Any help with those would be very helpful.

Thank you

Brad

@mytwoheads

Thankk can you please send test email all details

https://vespahouse.myshopify.com/

yiarea3

Hi,

Also,

Product images are not aligning with their colour variation

Too much white padding on the home page above and beneath sections

Newsletter section is far to big in height

Appreciate your help Ketan :slightly_smiling_face:

1 Like

@mytwoheads

Thanks for the details

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.newsletter {
    padding: 30px 0;
}
.newsletter .section-header+.section-subheading {
margin-bottom: 10px;
}
.index-sections .shopify-section {
    margin-top: 30px;
}
.section-header {
    margin-bottom: 20px;
}
2 Likes

Hi @KetanKumar ,

Thx for your interest. I solved the problem.

Have a nice day

1 Like

@cen9izh4n

Thanks for update.

Hi Ketan,

The on the product pages the Product images are not aligning with their colour variation choices

This has been resolved, thank you: Too much white padding on the home page above and beneath sections

Newsletter section now has no space between the header and the subtext (See below picture with text problem)

The logo changes position and I lose the main menu (See pictures below). Also, the logo in the mobile view is so small it can hardly be seen.

I’d like the logo to be on the left and full main menu available, I’de also like the mobile logo bigger - but I can’t seem to find the code to get those done!!

Appreciate your help Ketan

Hi Ketan,

In addition to my other problems.

I’m also having a problem with images not resizing for the home page slideshows and on collection pages, the featured image is only showing half the image and when scrolling down it cuts off the image. I’d like for the whole featured image to show on the Collection pages.

Thanks

Brad

1 Like

@mytwoheads

Thanks if you have more pleas send PM Details