Reducing Header Height

Solved
Highlighted
New Member
2 0 1

Hello!

I've already seen other similar posts but I can't find the solution.

In my site>> https://energyxfit.com/  (psw: Temp_EnergyXFit)

I want to reduce the header height. As you can see there's a lot of white space on top and bottom the logo. I tried to add this code in theme.scss.liquid (which I have now removed)

.site-header {
height:70px;
padding:0;
}

and it worked well on web version, but then, looking at the mobile version, I can see the header reduced but the logo (and menù) are not centered (there's more white space below than above).

Can someone help me?

Thanks!

0 Likes
Highlighted
Shopify Partner
3261 717 864

This is an accepted solution.

@Mafeal 

Please add the following code at the bottom of your assets/theme.scss.liquid file

@media only screen and (min-width: 590px) {
.site-header { padding: 0px !important; }
.site-header-sticky{ height: auto !important; }
}

@media only screen and (max-width: 590px) {
.site-header { padding: 0px !important; }
.site-header-sticky{ height: auto !important; }
}

Hope this helps.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
New Member
2 0 1

Thanks, it worked!