Remove Gap Inside Header

Store Design
, , , , , , , ,

Topic summary

A user is experiencing an asymmetrical gap in their desktop header, where the lower portion appears larger than the upper portion. They are using the Stiletto theme on Shopify.

Issue Details:

  • Gap only appears on desktop version
  • Creates visual imbalance in header layout
  • User provided screenshot showing the problem

Proposed Solution:
A respondent suggested a CSS fix involving:

  1. Navigating to Admin → Online store → Theme → Edit code
  2. Locating the theme.liquid file
  3. Adding custom CSS markup above the </body> tag

Status: The solution appears incomplete as the specific CSS code was cut off in the response. The discussion remains open with the fix partially provided.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hello!

Basically I want to remove a small gap that appears inside my header (only in desktop version) and it makes the lower part of the header bigger than the upper part, making it look asymmetric.

I attach a photo about this:

Captura de pantalla 2024-08-31 a las 15.38.33.png
Captura de pantalla 2024-08-31 a las 15.38.33.png2880×244 30.2 KB

My web is https://knsdahrl0hu3a6y1-60150284501.shopifypreview.com and my theme is Stiletto

Thanks in advance!

2

@martujv ,

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above
1 Like