Supply theme header modifications

Highlighted
New Member
2 0 0

Hiya!

I've found a few things in the archive but wasnt able to make them work for me so...

I'm not experienced in this so please be patient with me. My shop is https://purposebotanicals.com/

i would like to reduce the white space in the header, both above and below my logo. I would also like to make the search bar larger, or at least more centered on the page. 

Thanks!

 

0 Likes
Highlighted
Shopify Partner
20 2 8

Hi,

You must to change CSS rules which are located in /assets/theme.scss.liquid file

To remove space below and above logo you must change rules for .site-header . There is set padding top and bottom 30px od desktop and 15px on mobile, So change (in the file mentioned above):

padding: $gutter/2 0; to padding: 0; in line 2937

and

padding: $gutter 0; to padding: 0; in line 2942

For larger search bar you can change classes in header. Code for header is placed in /sections/header.liquid . So change classes:

large--one-half to large--one-third in line 5

and

large--one-half to large--two-third in line 46

 

 

2 Likes
Highlighted
New Member
2 0 0

This worked beautifully. Thank you for your assitance!

0 Likes
Highlighted
New Member
1 0 0

Hi! This is my last resort. I am quite stuck  

 

My website is Sportsarena.ch  and I am using the Supply theme. I would like to reduce the header size especially on Mobile and also make the carousel banners full bleed. Is this possible? Any help is most appreciated. My site: https://sportsarena.ch/

 

 

0 Likes