my current logo has increase of padding , how do i decrease this ?
Topic summary
Issue: The header logo in the Brooklyn theme shows excessive padding/space. The user wants it reduced to match a provided reference. Images comparing current and desired spacing are central to understanding the goal.
Proposed fix (CSS): Add a custom rule to the bottom of theme.scss (the theme’s main stylesheet) to adjust the header navigation’s position:
- Set the element to position: relative.
- Shift it upward using top: -42px with !important to override defaults.
This effectively reduces the visible gap around the logo by moving the nav block up.
Alternative approach: Edit the logo image itself to remove built-in whitespace/padding, which can reduce perceived padding without layout changes.
Outcome: The original poster acknowledged with thanks. No confirmation on which solution was implemented. No further issues reported.
Status: Likely resolved, though not explicitly marked. Key decision points are whether to adjust layout via CSS in theme.scss or modify the image asset’s padding.
1 Like
nav.grid__item.large--two-thirds.large--text-right.medium-down--hide {
position: relative !important;
top: -42px !important;
}
Add this code in the bottom of theme.scss file,
2 Likes
Hi @7kingodmsla ,
You can request your designer edit padding for this image again .
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
Best regards.
thank you 