How can I make the header smaller on mobile?

[NadiaCrisisEquipped]

Hello!

I have the header fixed at the top of mobile screens but I realized it takes up 1/3 of the screen almost.
Is there a way to make is smaller on mobile devices only? On desktop and tablet versions it looks perfect.

My site is crisisequipped.com and here’s a screenshot for reference.

Thanks so much for your time and help!
Nadia

[prakash_s]

Hello Nadia,

Thanks for writing to us

To make the header smaller in the mobile device you can add this CSS code in the X->Theme Option -->CSS

@media(max-width:767px){
.x-navbar-inner {
    min-height: 65px;
}
.x-brand img {
    width: 81.5px;
}
x-btn-navbar, .x-btn-navbar.collapsed {
 font-size: 18px;
}
}

You can change min-height and width value as per your design.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks