Change Header Size

Hello,

Can you please provide the link to your site so that I can help you regarding that.

Thank you.

Hey Gess,

You can reduce the size of header by adding following custom CSS to your theme using Advanced CSS Editor.

.site-header{
    height: 150px;
}
.main-title{
    font-size: 20px;
}

Adjust the font size and header height according to your needs. Hope it helps.

how do I reduce the height of the header in spotter.

@three30 – This topic is 10 months old and already marked as Resolved. Although it may seem that you have the same problem it is likely that the troubleshooting and solution for your issue is not the same. Per the Forum Guidelines please don’t jump into the middle of another support topic; start your own topic instead. Thanks.
https://make.www.ads-software.com/support/handbook/forum-welcome/#post-in-the-best-place

Hi, Anyone can help me and tell me how to reduce header height of my website https://www.viatours.org ???????
I am not good in this and would like exact place where I should add CSS codes
thanks
Murat

Hello mbajrami,

You need to add this CSS in your Custom CSS for adjusting that:

#masthead #hgroup-wrap {
    padding-bottom: 5px;
}
#site-logo {
    padding-top: 5px;
}

You can adjust the value as per your requirement.

Hope that helps.

Thank you.

Hello

Is any able to help me resize the header for my website?

I’m using the theme Shop Isle and want to take like an inch from the header!
https://astarwff.com/

Any help would be great

Thanks in advance

Zey

Hello @astarwff,

Are you referring to decrease the menu height?

If so then first of all you need to heard crop your logo.
Then add this CSS in your Custom CSS for adjusting that:

.logo-image > img {
    max-width: 200px;
}

Hope that helps.

Thank you.

Thank you so much for replying to my post,yes i am referring to the menu as it is too wide. Forgive me i still don’t follow what you have suggested!

Are you saying i need to crop my logo?
and where do i find my customm CSS?

Thank you again for your help

Hello @soumendra

I just wanted to make it a bit more clear that i want to get rid of the grey section in between the background image and menu header.

Thanks again

Hello @astarwff

If you trying to reduce the dark gray background height then you need to add this instead in your Custom CSS:

.page-header-module.module {
    padding-bottom: 0;
}

Hope that helps.

Thank you.

Great thank you @soumendra,it worked!!!!

Many thanks again

Hello @astarwff,

It’s a pleasure helping you.

Feel free to ask you need any other help. ??