Need help modifying height of header

Sorry for jumping right in with this question, because I could probably find the answer but don’t have the time to research more extensively right now and I’ve already tried everything I could think of.

I just need to adjust the fixed height of the header area on this site:

http://h3systems.com/blog/

Can you help me make this simple modification?

Thanks,

Scott

Hey Scott,

Welcome to the BB forums! Try using this CSS snippet to achieve that.

.fl-page-header-fixed .fl-page-header-wrap {
  height: 100px;
}

Let us know how it goes! :slight_smile:

Ben

Hey Ben, thanks for your response!

I tried adding this to the CSS Code area in Customize > Code > CSS Code but it doesn’t have an immediate effect. Should I be applying it directly within the style.css file?

Hey Scott,

Sorry, I actually thought you wanted to adjust the height of the fixed header. My bad. Try this CSS snippet instead. Feel free to adjust the first value.

.fl-page-header-primary .fl-page-header-wrap {
  padding: 20px 0px;
}

Ben

Hmm. I must be going about this wrong because this still isn’t quite doing the trick. I’m trying to make the padding a negative value because I want the logo to remain the same size, I just want to eliminate all the excess white space.

Hey Scott,

I actually thought you wanted to add more white space! :slight_smile: We can’t assign a negative padding but we can assign a negative margin. This CSS snippet should fix you right up!

.fl-page-header-primary .fl-page-header-wrap {
  margin-top: -8px;
  margin-bottom: -9px;
}

I’ve also noticed that the excess white space is caused by your logo. You can opt to trim the white space off your logo or just use the CSS above. Either one work fine. :slight_smile:

Ben

Hey Ben, the weird thing is that I did cut the logo down so that there is no additional white space above the logo itself. That was my first attempt at fixing this. Weird! Is it possible that I picked the wrong file?

Anyway, thank you! This fixed it perfectly.

.fl-page-header-primary .fl-page-header-wrap {
margin-top: -70px;
margin-bottom: -70px;
}

Hey Scott,

Do you mind telling me what browser you are using and on what platform? It looks like there may be a browser compatibility issue going on here. This is what I see on your site now.
http://imgur.com/mU13Ezu

Ben

Oh shoot - I’m using Chrome on OSX Yosemite 10.10.4, looks like you’re on FireFox - should have thought to test it. I wonder if it was looking right on FireFox before this CSS change…

Hey Scott,

I’m on Windows 7 and I checked the site both on FF and Chrome. I had the guys who are on Yosemite as well check the site and they’re seeing the same thing as I am on FF, Safari and Chrome. Have you tried clearing cache?

Ben

I’ve tried clearing my Chrome Browser cache and Beaver Builder’s cache and it’s still showing up correctly on my computer. My colleague is running it on Internet Explorer and it looks right there too.

Hey Scott,

Could you try doing a DNS cache flush(link for mac)? This could be caused by a deep caching issue. Let us know how it goes!

Ben

Gave that a shot - still seeing the page display like this:

header looks ok

Colleague is operating on a separate windows computer and also sees it display this way.