Header fixed iphone & ipad | PenciDesign Support

KeviinP replied

4 years ago

Customer Reply

Hi, thank you.

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

About this case, I need to check it on some other devices and then update this ticket when the problem is resolved.

Regards,
PenciDesign.

KeviinP replied

4 years ago

Customer Reply

Hi,

Thank but It did not work.

Regards,

Kévin

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please add this CSS code to your site:

.penci_header.penci-header-builder.main-builder-header {
    transform: translate3d(0,0,0);
}
.penci_topbar.penci-desktop-topbar,
.penci_mobile_midbar.penci-mobile-midbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999999;
    overflow: hidden;
   -webkit-overflow-scrolling: touch;
}

Regards,
PenciDesign.

KeviinP replied

4 years ago

Customer Reply

Hi,

I tested on the iphone and it doesn't work.

I have no problem with this model: https://soledad.pencidesign.net/soledad-travel-blog3/

This is what I tried to reproduce.

Regards,

Kévin

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please try to modify the CSS code like this:

.penci_topbar.penci-desktop-topbar, .penci_mobile_midbar.penci-mobile-midbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999999;
    transform: translate3d(0,0,0);
    overflow: hidden;
}

Regards,
PenciDesign.

KeviinP replied

4 years ago

Customer Reply

ipad : 14.7.1

iphone : 15.5

Thanks

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please send me an iOS version, I'll check and try to fix it.

Regards,
PenciDesign.

KeviinP replied

4 years ago

Customer Reply

I tried :

transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-overflow-scrolling: touch;

It did not work

KeviinP started the conversation

4 years ago

Conversation Start

Hello,

I have a problem with my header on iphone and ipad (tested on safari and chrome). I tested on chrome and safari on a macbook and it works without problem. Also tested with chrome on Android. Its ok.

When I scroll the page very quickly down, the header bugs and does not attach to the top. The actions of the header are always at the top of the page (without visual), it's just the visual of the header that bugs.

Here is the css that allows me to fix the header at the top of the page:

.penci_topbar.penci-desktop-topbar, .penci_mobile_midbar.penci-mobile-midbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999999;
}
.penci-builder-mobile-sidebar-nav.penci-menu-hbg, .close-mobile-menu-builder {
    z-index: 999999999;
}

Regards,

Kévin