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

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

Home Forums Support Fixed site header and menu (Tom's fix) enlarges Page Headers background images?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #602826
    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

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #603155
    Tom
    Lead Developer
    Lead Developer

    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?

    #603319
    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

    #603421
    David
    Staff
    Customer Support

    Hi Jim,

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

    #603427
    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

    #603432
    David
    Staff
    Customer Support

    You can try swapping out this part of the code:

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

    for:

    .custom-fixed-header + * {
        margin-top: 145px;
    }
    #603440
    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?

    #603679
    David
    Staff
    Customer Support

    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.

    #603794
    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

    #603905
    David
    Staff
    Customer Support

    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.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.