Solved

Can I reduce header height on mobile in Shopify?

Booshy
Excursionist
14 0 2

Hi everyone

hope you might be able to help me again with another quick question, I have tried some previous solutions but can’t seem to get it to work.

When on mobile, my header has a bit too much white space top & bottom making it a bit big. 

Could you advise how I could take off about 50% of this away from the top & bottom please?

site - www.allthekids.co.uk

password - folieb

7473C28A-DD53-4474-A5D4-17DD32A57D42.png

Accepted Solution (1)

Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

hii, @Booshy 
Paste this code on top of the theme-index-min.css file.

@media only screen and (max-width: 768px) {
.header-logo-wrapper {
    height: 108px !important;
    margin-top: -25px !important;
}
.sticky-mobile-header.d-lg-none {
    height: 100px !important;
    margin-top: -33px !important;
}
}

Thank You.

View solution in original post

Replies 2 (2)

Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

hii, @Booshy 
Paste this code on top of the theme-index-min.css file.

@media only screen and (max-width: 768px) {
.header-logo-wrapper {
    height: 108px !important;
    margin-top: -25px !important;
}
.sticky-mobile-header.d-lg-none {
    height: 100px !important;
    margin-top: -33px !important;
}
}

Thank You.

Booshy
Excursionist
14 0 2

Perfect, thank you 🙂