Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #3095752
Header fixed iphone & ipad
Closed

Comments

  • KeviinP started the conversation
    August 2, 2022 at 8:55am

    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

  • KeviinP replied
    August 2, 2022 at 9:15am

    I tried : 

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


    It did not work

  •  2,489
    PenciDesign replied
    August 2, 2022 at 9:43am

    Hi,

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

    Regards,
    PenciDesign.


  • KeviinP replied
    August 2, 2022 at 9:48am

    ipad : 14.7.1

    iphone : 15.5


    Thanks

  •  2,489
    PenciDesign replied
    August 2, 2022 at 11:30am

    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
    August 2, 2022 at 1:07pm

    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

  •  2,489
    PenciDesign replied
    August 3, 2022 at 2:13am

    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
    August 3, 2022 at 2:31am

    Hi, 

    Thank but It did not work. 

    Regards, 

    Kévin

  •   KeviinP replied privately
  •  2,489
    PenciDesign replied
    August 3, 2022 at 5:24pm

    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
    August 4, 2022 at 12:04am

    Hi, thank you.