Disable Sticky Header on Certain Page and Ajax Loading Icon Position on Mobile

Hello,

I enabled Sticky Header for my site but I would like to disable Sticky Header only on Checkout page because it really limit user’s visible area on mobile devices when the keyboard is on.
Is there any way to do this?

Another question is the loading icon position after clicking place order button on checkout.
The icon is positioned at the center on checkout page on desktop mode.
But on mobile phones, you can’t usually see the loading icon because when you click place order button you are near the bottom of the page.
I tried below code to adjust this but this also depends on what mobile device I’m using.

@media (max-width: 767px){
form.woocommerce-checkout > .blockUI.blockOverlay:after {
    top: auto;
    bottom: 20%;
}
}

Is there a better way to vertically center the loading icon on mobile devices based on current visible area?

Thank you,

Hi,

Use the following code snippet for the sticky header

body.woocommerce-checkout .header-sticky-real.act-scroll {
   position: absolute;
}

Try to use this code snippet for the loader

@media (max-width: 767px){
form.woocommerce-checkout > .blockUI.blockOverlay:after {
   top: auto;
   bottom: 180px;
}
}

Regards

Both codes worked perfectly.

Thank you very much!

You are welcome!

[Author]

Posts