Theme Supply, how to reduce the height of header

[Colin74pei]

Hello,

I am using them Supply, the height of header is too big, so after digging here, I add to the bottom of theme.scss.liquid file.

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

I set the logo size in customize screen is 150px.

The problem is:

1) When view in computer, the position of logo is a bit higher, I want to be a center-vertical.

2) When view in mobile, it affects on "Announcement line", the position of "Announcement line" is not nice, a bit lower, how to be a center-vertical.

3) If change the value of Height:240px to Height:200px (to reduce the height as much as possible), when view in mobile device, it NOT show the slideshow (now shows 3 pictures).

My URL: mimocity.ca

Pass: yatwee

Any suggestion, thanks in advance.

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.css and paste this at the bottom of the file:

.site-header {
height: 175px!important;
padding: 0;
}

@media only screen and (max-width: 768px){
.site-header {
height: 209px!important;
padding: 0px!important;
}
.grid-item.large--one-half.text-center.large--text-right {
display: none;
}
}

[Mehrabanstore]

it's not working to me I using craft theme but it's not resize the header too make smaller so I you can do that so please make for me to in desktop view shows the header like amazon or etc... I mean small header!!!

it's my website  www.mehrabanstore.com

[MS-WEB-DESIGNER]

Dear @Colin74pei 

• From your Shopify admin, go to Online Store > themes.
• Locate your current theme and then click Actions > Edit code.
• After that in the Assets folder, click to open your theme.scss.liquid file.
• Go to the very bottom of this file and paste the following code:

/* Start */
header.site-header {height: 185px !important;} 
@media only screen and (max-width: 768px){
header.site-header {height: 180px !important;} 
.header-logo .lazyload__image-wrapper {max-width: 110px !important; }
header.site-header .header-logo { margin: 15px auto !important; }
header.site-header .site-header--text-links, header.site-header .site-header--text-links p {margin-bottom: 0px !important;}
}
/* End*/

• Save and check your theme by refreshing it.
•  

[Colin74pei · Accepted solution]

Dear Pallavi and MS-WEB-Designer,

Both of codes work for me, thank you very much for your support.

[ZestardTech]

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.