Make Header Thinner

Store Design
, , , , ,
1

Hello!

Is there a way to make my header thinner? That is, make the spacing between the icons (logo, cart, menu, etc.) and the header limits, both above and below, smaller?

My theme is Stiletto, my website is https://winnerofficial.com and my password is y21

2

Hello @martujv ,

I understand you are looking to make your header section thinner.

Please copy & paste the below mentioned code at the bottom of theme.liquid file before tag and save.

.header__row.header__row-desktop.lower { height: 40px; } .header__row .header__row-segment.contains-nav { overflow-x: visible !important;; } /* The below mentioned code you can use for providing space between icons */ a.header__icon-touch { margin: 0 10px 0 10px; }

Output =>

Anshul_arora_0-1710935266551.png
Anshul_arora_0-1710935266551.png1590×781 278 KB

I hope the code helps you.

Please share if you have any query.

Thank you.

3

It worked on the desktop but not on the phone, any solution for that?

And thank you for the answer!

4

Hello @martujv ,

Please add the below mentioned code to change the height of the header section for mobile screens .

Copy & Paste the code at the bottom of theme.liquid file before tag and save.

Output -:

Anshul_arora_0-1711004637303.png
Anshul_arora_0-1711004637303.png1594×785 149 KB

I hope it helps.

Please let me know if you have any query.

Thank you