How to decrease the height of the site header in Supply theme

Highlighted
New Member
3 0 0

Hi everyone,

I am having trouble locating the CSS class to define the height of the site header. I am using the Supply theme. How can I decrease the height? Thanks.

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
400 0 68

Hi Alex, 

Britton here with the Shopify support team.

The way to change that would be to target the header in the timber.scss.liquid asset in your theme's files. You can get to that by visiting online store > themes and clicking the "three dots menu" beside the customize theme button. From there, select "edit html/CSS" and open up the assets folder.

You are going to want to add your new code here right at the bottom of this file after all of the preexisting code. This is what I would add:

.site-header {
height:150px;
padding:0;
}

Keep in mind that the numbers shown above are just examples. You will need to play with those to get the effect that you want. As always, make sure to back up your theme by duplicating it before making any changes.

I hope that helps!

-Britton

Britton Shopify Guru
2 Likes
Highlighted
New Member
3 0 0

Thanks for the awesome support, Britton!

0 Likes
Highlighted
New Member
4 0 0

Worked perfect for me - greatly appreciated Britton.

0 Likes
Highlighted
New Member
1 0 0

Hi Britton,

I was wondering if there is a new location for customizing the header height in 2017. Please and thank you.

 

Tristan

0 Likes
Highlighted
Tourist
5 0 1

I cant find timber.scss.liquid in the asset for my supply theme.

0 Likes
Highlighted
New Member
2 0 0

how to do it from the top?

0 Likes
Highlighted
Excursionist
19 0 0

you need to paste the code from above into your theme.scss.liquid at the very bottom. Then save and adjust the number [150px] to the one that gives your page the desired look

0 Likes
Highlighted
Tourist
10 0 2

Hi,

Does anyone know how to change only the mobile header height in the Supply theme?

The above code worked for desktop and mobile, but I'd like to only reduce the size on mobile. It's too tall. 

Thanks!

0 Likes
Highlighted
Excursionist
18 1 1

you can wrap your code in css media query:

 

@media only screen and (max-width: 600px) {

  ... your css rules

}

 

Also you can change 600px to whatever you consider is max screen width for mobile. Usually it is 768px;

0 Likes