How can I decrease padding in the Brooklyn Theme?

Store Design

Topic summary

Reducing top padding under the header in the Brooklyn Theme. The default desktop spacing between the header menu and page content is 80px, controlled by the Sass variable $contentTopMargin in timbers.css.liquid (near the sizing variables). Updating $contentTopMargin adjusts padding on most pages; $contentTopMarginSmall affects smaller screens.

Scope of the provided code: The rule sits under .main-content with body:not(.template-index), meaning it applies to non‑home pages only.

Current outcome: Changing $contentTopMargin successfully reduces padding across most pages but does not affect the home page.

Open issue: How to reduce the same padding on the home page (template-index). No specific home page selector or fix was provided yet.

Requested next step: Share the store URL and password (if protected) so tailored guidance can be given, and identify/edit the home page–specific padding rule.

Notes: A code snippet is central to understanding the solution; an example image was shared but is not essential to the fix.

Status: Partially resolved (non‑home pages); home page adjustment remains unanswered/ongoing.

Summarized with AI on February 9. AI used: gpt-5.
1

I was wondering how I can reduce this padding on my website with the Brooklyn Theme.

I saw a couple of other threads about this but they were all outdated. Any help would be great.

Thank you.

Example.png
Example.png1259Ă—470 47.3 KB

2

hello @Vettaa

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

3

Hi,

in Brooklyn Theme the default padding you have on top between the header menu and the product page content is 80px for Desktop.

You can find the code inside timbers.css.liquid file here:

.main-content {
  display: block;

  // to be kept before Sections Everywhere
  body:not(.template-index) & {
    padding-top: $gutter;

    @include at-query($min, $large) {
      padding-top: $contentTopMargin;
    }
  }

  @include at-query($min, $postSmall) {
    padding-bottom: 40px;
  }
}

The variable you need to change is $contentTopMargin that you can find at the beginning of the same file at around line 393.

You can change $contentTopMargin to any value you prefer.

// Sizing variables
$gutter: 30px;
$gridGutterMobile: 22px;
$section-spacing-small: 35px;
$gridGutter: 30px; // can be a %, but nested grids will have smaller margins because of it
$contentTopMargin: 80px;
$contentTopMarginSmall: 35px;
$radius: 0;
$customSelectHeight: 46px;
1 Like
4

This works on most pages, but not the home page. Do you know where to edit the same padding at the top of the home page (under the menu)?