Theme Supply, how to reduce the height of header

Solved
Colin74pei
New Member
2 1 0

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.

0 Likes
Pallavi
Shopify Expert
1820 276 332

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;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes

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.
  •  
Regards,
Task4Store - Get Shopify Small Task Help
Contact Us
: https://www.task4store.com/pages/contact-us OR task4store@mswebdesigner.com
1400+ Happy Clients | 25000+ Shopify Small Tasks Done
0 Likes
Colin74pei
New Member
2 1 0

This is an accepted solution.

Dear Pallavi and MS-WEB-Designer,

 

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

0 Likes