[Resolved] Display issues iPad using “stick this” sticky command for header & top bar

[Dominique]

Hi,

Since I had no other choice as native sticky option of GeneratePress doesn’t stick the top bar. I’m using the following CSS to stick top bar & menu. It works great on all devices that I tested except iPad on all browsers.

/* Sticky site header & top bar */

.top-bar {
position: sticky;
z-index: 999;
top: 0;
}

.site-header {
position: sticky;
z-index: 999;
top: 49px; /* height of top bar */
}

/* END sticky site header & top bar */

The following screen shot shows the issue:

Is there a workaround that would make that I can use the native GeneratePress sticky option that will include the top bar and eliminate the display issue on iPad? Keeping in mind that the end result would display everything the same as it is displayed now except on iPad. Any other working solution like adding some simple command to the existing CSS to make it work would be viable.

Please advise on solution.

[David]

Hi there,

in your CSS include this line:

position: -webkit-sticky;

You can add it before or after: position: sticky;

[Dominique]

Hi,

You’re the mighty master of CSS.

webkit to the rescue!

Works beautifully everywhere.

Thanks

[David]

Glad to be of help 🙂

[Author]

Posts