Solved

Make Header Thinner

martujv
Excursionist
46 1 11

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

Accepted Solutions (2)
martujv
Excursionist
46 1 11

This is an accepted solution.

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

 

And thank you for the answer!

View solution in original post

Anshul_arora
Navigator
293 68 48

This is an 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 -:

Anshul_arora_0-1711004637303.png


I hope it helps.

Please let me know if you have any query.

Thank you

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 3 (3)

Anshul_arora
Navigator
293 68 48

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 =>

Anshul_arora_0-1710935266551.png

I hope the code helps you.

Please share if you have any query.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
martujv
Excursionist
46 1 11

This is an accepted solution.

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

 

And thank you for the answer!

Anshul_arora
Navigator
293 68 48

This is an 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 -:

Anshul_arora_0-1711004637303.png


I hope it helps.

Please let me know if you have any query.

Thank you

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here