Edit Gap Inside Header

Store Design
, , , , , , ,

Topic summary

Goal: Reduce the top gap above the logo/icons in the desktop header of the Shopify Stiletto theme to make the header thinner. The lower gap was already reduced with CSS targeting .header__row.header__row-desktop.lower.

Key change suggested: Adjust the upper header row via CSS to shift it upward.

  • Steps (both replies): Online Store → Themes → Edit code → open base.css or theme.css → add a rule for .header__row.header__row-desktop.upper.
  • Option 1: Set position: absolute !important; top: 23px !important; right: 175px !important; (includes screenshots of the outcome).
  • Option 2: Set position: absolute; top: 23px; right: 381px; (also includes a result screenshot).

Notes:

  • Both solutions rely on absolute positioning of the upper header row with specific top/right offsets to reduce the visible top spacing.
  • Images/screenshots are provided to show the before/after layout and are central to understanding the change.

Status: No confirmation from the original poster that the fix worked; the thread appears open, with right offset values varying by setup.

Summarized with AI on December 24. AI used: gpt-5.
1

Hello!

Basically I’m trying to make my header thinner on desktop version.

I managed to find a code for making the “bottom gap” inside the header (below the logo and menu icons) smaller with this code:

.header__row.header__row-desktop.lower { height: 65px; }

But this only affects the lower part of the header (it reduces the distance between the logo and the bottom of the header, making it thinner).

I would need a code for the upper part (the gap between the top of the header and the logo/icons).

My theme is stiletto and my web is www.winnerofficial.com

Thanks in advance!!!

1 Like
2
  • Here is the solution for you @martujv
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.header__row.header__row-desktop.upper {
 position: absolute !important;
    top: 23px !important;
    right: 175px !important;
}
  • Here is the result you will achieve:

BSSTekLabs_0-1721910063443.png
BSSTekLabs_0-1721910063443.png1892×599 235 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
3

Hello @martujv

Go to online store ---------> themes --------------> actions ------> edit code------->theme.css
and add this code at the end of the file.

.header__row.header__row-desktop.upper {
    position: absolute;
    top: 23px;
    right: 381px;
}

and the result will be

15.png
15.png1920×919 214 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks