Edit Gap Inside Header

Store Design
, , , , , , ,
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!!!

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