[Resolved] Generate combined page header

[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

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

Thanks in advance.

[Leo]

Hi there,

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

Let me know if this is fixed.

[Nikola]

Hi Leo,

nope, the problem is still on.

:/

[Leo]

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.

[Nikola]

I am using LG phone and Chrome.

:/

[Tom]

Perhaps you need to do something like this:

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

[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.

:/

[Tom]

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.

[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.

:/

[Tom]

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

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

[Nikola]

Ok, done. You can take a look.

[Tom]

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

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

[Nikola]

Like every time, you found the solution.

Thank you very much guys!

🙂

[Tom]

You’re very welcome!

[Author]

Posts