Adjusting Header Height in Integrity

[kaylapawsnstone]

Hi all - I’ve checked the forums but can’t find anything more recent than 2018. I am using Integrity and have found that my header height is much taller than I’d like since adding in my logo. I can decrease the width of my logo, but there’s still just way more spacing above and below the logo than I’d like. I’ve tried adjusting top height, top alignment, and link alignment (along with just about everything else under Theme Options > Headers. It just seems like there’s way too big of a gap above and below my logo and it’s making the whole menu really fat.

The site is k9conservationists.org for visual reference.

Thanks!

[tristup]

Hi Kayla,

Thanks for reaching out.
It seems that the image width of the logo is the reason behind your issue, I would suggest you reduce the width from Theme Options > Header > Logo( Image ).

Hope it helps.
Thanks

[kaylapawsnstone]

Hi tristup, thanks for replying but I don’t want to make the header narrower - I want to deal with the white space above and below it. Making the header 300px wide just makes the header less wide but there’s still a ton of dead white space.

[Tessman]

Hi @kaylapawsnstone … it looks like you have plenty of built in ‘extra space’ in your logo file that could be cropped to help accommodate the unwanted space above and below the logo.

[tristup]

Hi Kayla,

I checked your website and found the following points which are the reason behind your issue.

1. Width of the Logo is set to 400px, it should be 200px to get the header narrower.

2. Top margin 22px has been added to the Logo using custom CSS code. As the logo has enough space on the top and bottom, I would suggest you remove it.

3. Once you follow the above steps, you will find the Navigation goes under the content area, cause the padding 90px top has been added through the custom CSS code. I would suggest you adjust this value to 40px.

Hope it helps.
Thanks

[kaylapawsnstone]

I’m sorry, I’m not sure where to adjust the CSS or exactly what to change, it’s hard to see on your screen. When I go to X -> theme options -> global CSS I only see an adjustment that I made to the featured image for blog posts. I’m not seeing this logo info. Where do I go to modify that??

[nabeel]

Hey Kayla,

You can temporarily remove all custom CSS added to Global CSS section. Once you do that. please navigate to Theme Options > Headers and change the Links Alignment to 40px

Similarly, you need to change the Top Height to 95px via Theme Options > Headers > Top Height

Lastly either remove the whitespaces from the logo itself by editing in an image editor like Photoshop or reduce the width of the logo to maximum of 100px to remove the extra gap.

Hope this helps!