Make Header Thinner

[martujv]

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

[martujv · Accepted solution]

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

And thank you for the answer!

[Anshul_arora]

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 </body> tag and save.

<style>

.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;
}

</style>

Output =>

I hope the code helps you.

Please share if you have any query.

Thank you.

[martujv · Accepted solution]

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

And thank you for the answer!

[Anshul_arora · Accepted solution]

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 </body> tag and save.

<style>

@media screen and (max-width: 767px){
.header__row.header__row-mobile {
min-height: 40px !important;
}
}

</style>

Output -:

I hope it helps.

Please let me know if you have any query.

Thank you