Theme Supply, how to reduce the height of header

Store Design
1

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.

2

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;
}
}
1 Like
3

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.
4

Dear Pallavi and MS-WEB-Designer,

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

1 Like
5

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.

6

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