How to make mobile header height shorter

[samueljoonjung]

How do I make the height of the header shorter here. And the icons and logo to be smaller along with it. 

[samueljoonjung]

my website url is www.whosociety.com

[Mustafa_Ali]

<style>
@media screen and (max-width: 767px) {
.header {
    margin-top: -10px !important;
    margin-bottom: -1rem !important;
 }
}
</style>

hey @samueljoonjung dear follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body> ----->
before the body ----->
if this code work please do not forget to like and mark it solution

[GTLOfficial]

Hello @samueljoonjung 
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

@media screen and (max-width: 749px) {
.header.header--middle-left.header--mobile-center.page-width.header--has-menu.header--has-account {
  margin-top: -0.6rem !important;
  margin-bottom: -1rem !important;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[AnnieHy · Accepted solution]

@samueljoonjung 
Hello

This is code to make header shorter and icon smaller

@media screen and (max-width: 768px){
header.header .header__heading-logo-wrapper > img {
    width: 35px !important;
}
header.header {
    height: 38px !important;
}
header.header summary.header__icon.header__icon--menu svg {
    width: 15px !important;
}
header.header summary.header__icon.header__icon--search svg {
    width: 15px !important;
}
header.header a#cart-icon-bubble svg {
    width: 35px !important;
}
}

You can add code here:  https://prnt.sc/Kdn1QhpAvDUG

[samueljoonjung]

Thank you very much