Page header not merging with site header

Home Forums Support Page header not merging with site header

Home Forums Support Page header not merging with site header

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #196532
    Tom

    Hi Tom,

    I can’t figure out what I’m doing wrong, but, I want to use a large image as the page header for a single Page on my blog, but it’s staying contained within the content box. You can see it here: http://blog.kultureshock.net/about/

    In the Page Header for the About page, I have the Merge with site header option turned on within the Advanced tab. In Content Settings, I have Add background image turned On and Container type set to Fluid.

    I’ve tried all kinds of variations of different options, but, the image isn’t merging with the site header for some reason no matter what I do. Any idea why it’s not working? Thanks!

    #196533
    Tom

    Hi Tom,

    Okay, I think I found out why. I had to change Page Header Position to “Above Content Area” in the Layout section of the customizer.

    However, now the menu at the top seems to be getting cut off a bit along the top edge.

    #196567
    Tom
    Lead Developer
    Lead Developer

    Interesting, try adding this CSS:

    .generate-combined-header {
        top: 0;
    }

    Not sure why it’s necessary in your case only, but I think it should fix it.

    #196686
    Tom

    Thanks Tom.

    It’s probably because I had to add this CSS to remove the margin area around post photos:

        .page.post-image-above-header .page-header-content {
            margin: -40px -40px 40px;
        }

    I just realized if I remove that, the problem goes away on pages, as long as I place the photo above the content area. If within the content area, then the margin is back around the images just on pages. I also added some PHP code that you recommended to remove the margin around photos on blog posts and the homepage.

    The top: 0 code does help a bit, it places the menu flush to the top of the screen. I tried adding top: 30px and it’s close to what it looks like on other pages. But instead I’ve just removed the above CSS and that seems to work better for now.

    • This reply was modified 5 years, 2 months ago by Tom.
    #196698
    Tom
    Lead Developer
    Lead Developer

    You could try something like this instead:

    .page.post-image-above-header div:not(.generate-combined-header) .page-header-content {
        margin: -40px -40px 40px;
    }
    #196728
    Tom

    Thanks, Tom, that works! That not() CSS function is new to me, going to have to read up more about that one.

    I decided to forgo using the large site header because it doesn’t scale height-wise for smartphones. I have to add top/bottom padding of 300px with empty content to make the image show up (otherwise the image just doesn’t display), which looks good on a desktop. But on a smartphone the height is maintained, so, the entire height of the screen is filled with just the image until you scroll down. Width-wise the image stays pinned in place on the left side rather than keeping the image centered. I’m sure there’s a CSS tag that I could change to “background-position: 50% 50%” or something like that to change it.

    So I’ll request a future feature: please consider making the height scale responsively for larger banners (“merge with site header” and Section banners) on smartphones, with the option to keep the image centered within the space as well.

    Thanks a lot for your help!

    Tom

    #196732
    Tom
    Lead Developer
    Lead Developer

    I’m working on a way to scale the padding top/bottom down on mobile – I might have to just add new options for mobile for those values 🙂

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