[Support request] Fixed site header and menu (Tom's fix) enlarges Page Headers background images?

[Jim]

Hi, David recently helped me out with setting up a full-width page header. I’m also using some CSS Tom has posted previously to affix the site header and main bar menu. Independently they work great. However, if you add ‘Top & Bottom’ padding in the ‘Content’ area of a Page Header then it enlarges the header image? The header image is 2000px x 400px.

This is Tom’s CSS to fix the header and nav.
.custom-fixed-header {
position: fixed;
top: 0;
width: 100%;
z-index: 2000;
}
.custom-fixed-header + * {
padding-top: 145px;
}

Any ideas on a fix would be much appreciated?

Jim

[Tom]

Hey Jim,

Can you show me what it looks like when the header image is enlarged? Or is to currently too big?

Is it the logo you’re looking at, or the page header background image?

[Jim]

Hi Tom, thanks for getting back to me.

I have created three near-identical headers to show you how the header image enlarges. The only difference being the Top & Bottom padding in the header’s ‘Content’ area.

The first has no Top & Bottom padding at all and displays the image actual size except that at the moment the menu masks it a bit. No Top & Bottom padding

The second has 50px Top & Bottom padding and you can see the image has enlarged. 50px Top & Bottom padding

The third has 100px Top & Bottom padding where the image has enlarged even further. 100px Top & Bottom padding

I can let you have Admin access if required?

Thanks in advance.

Jim

[David]

Hi Jim,

what is the end result you are looking for? That the image remains the actual 2000px x 400px size?

[Jim]

Hi David,

Yes, the image would remain the same size. If I remove Tom’s code then the result is as per your solution last Thursday whereupon the header image is centered and the height remains fixed. The left/right sides become hidden depending on the screen size.

Jim

[David]

You can try swapping out this part of the code:

.custom-fixed-header + * {
    padding-top: 145px;
}

for:

.custom-fixed-header + * {
    margin-top: 145px;
}

[Jim]

Ok, I’ve just made the change so you should be able to see the results. It appears the image is still being enlarged?

[David]

Hi Jim,

sorry bit confused, if you increase the container padding, the container gets bigger and ergo the background image which is set to cover will get bigger.

If you want the image to be exactly 400px height then you can leave the changes to CSS i provided. Deselect Add Padding from the pageheader and apply 200px Top / bottom padding. This should maintain it scale until the browser window extends past 2000px.

[Jim]

Hi David,

Yes, I understand the container padding affects page header but it also seems to have a multiplying effect if you are using a fixed site header with a background image. I’ve tried setting the container top and bottom padding to zero and although I can get the header image to stabalise, it then mucks up the title and page layout. I think I’m going to have to decide to either forget the page headers or the fixed site header. Probably the site header.

Thanks again for trying though.

Jim

[David]

Hi Jim,

thats odd, i would only expect the site header to effect this if the page header was merged with it. The other alternative is to set the background image to contained. You could do that inside a 2000px media query so it then goes to cover for the bigger screens.

[Author]

Posts