Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Generate combined page header

Home Forums Support Generate combined page header

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #382436
    Nikola

    Hello, i have a problem with “merge with site header” function on mobile and tablet devices.

    Merge with site header is assumed to be a full screen, but something strange is going on mobile and tablet devices. Header is taller at height (for google chrome nav bar-i think that height of nav bar is the same height like that space) than view port of devices. I have space between div element on page header and bottom edge of page header.

    When i uncheck .generate-combined-page-header {height: 100vh !important;} everything is ok, but how to delete it or disable it and to stay full screen, and of course to stay with “merge with site header” function.

    With normal full screen header i dont have that problem.

    This is the link for my site Link

    And this is the picture of a problem Problem

    I tried everything, also i have unchecked a posibilty that problem is with a element on header.

    Thanks in advance.

    GP Premium 1.4.3
    #382517
    Leo
    Staff
    Customer Support

    Hi there,

    I’m not seeing the problem? https://s26.postimg.org/j3wxydb0p/IMG_6345.png

    Let me know if this is fixed.

    #382642
    Nikola

    Hi Leo,

    nope, the problem is still on.

    :/

    #382783
    Leo
    Staff
    Customer Support

    Hmm but I’m not seeing the problem. The screenshot above is from my phone.

    Does it only happen on one browser? I was using iPhone 6s and Chrome.

    #382799
    Nikola

    I am using LG phone and Chrome.

    :/

    #382821
    Tom
    Lead Developer
    Lead Developer

    Perhaps you need to do something like this:

    @media (max-width: 768px) {
        .generate-combined-page-header {
            height: auto !important;
        }
    }
    #382832
    Nikola

    Nope, i tried. That broke header.
    You can look, i left that line of code in css.

    I tried on a couple of android phones with google chrome and the problem is the same.

    I did not tried with ios, Leo tried and with ios everything is ok.

    :/

    #383056
    Tom
    Lead Developer
    Lead Developer

    Happening for me too on my Pixel – trouble is that it’s not happening in my browser so it’s hard to debug.

    It’s like the absolute positioning isn’t referencing the true bottom of the element.

    Maybe instead of height:auto, try a value like height:600px.

    #383073
    Nikola

    Still no,

    When i put 600px, look what happen. I have a problem with a position of a div element on header, on devices with diferent resolution of screens.

    When i uncheck .generate-combined-page-header {height: 100vh !important;} in google inspect element everything is ok, but how to delete it or disable it ?

    And also, when i am not using merge with site header, only normal full screen header option, everything is ok, but i want this cool option of merge with site header on this website.

    :/

    #383427
    Tom
    Lead Developer
    Lead Developer

    Can you add this CSS and leave it so I can inspect?:

    @media (max-width: 768px) {
        .generate-combined-page-header {
            height: 600px !important;
        }
    }
    #383429
    Nikola

    Ok, done. You can take a look.

    #383564
    Tom
    Lead Developer
    Lead Developer

    Aha.. Scrap that CSS, and try adding this:

    .generate-combined-page-header {
        position: relative;
    }
    #383659
    Nikola

    Like every time, you found the solution.

    Thank you very much guys!

    🙂

    #384019
    Tom
    Lead Developer
    Lead Developer
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.