Distraction free checkout

Hi,

Please share the snapshot and page URL to check the issue.

Hi @abhikr781,

URL: https://mydreamtattoo.com/checkout/

Snapshots:
Desktop: https://ibb.co/Pccsm9J
Mobile: https://ibb.co/vmnpgLH

P.S. I use a plugin called “Oceanwp sticky header” to make the header stick to the top. If that matters.

Hi,

Since you are using a sticky header, therefore, it happens. Try to use the below code to fix it –

main#main {
    margin-top: 60px !important;
}

Hi @abhikr781,

This does not help. I want the header to have a white background. It’s currently transparent and looks weird with the floating logo.

Is it possible to turn off the sticky header on the checkout and other specific pages with some code? That would be even better.

Thanks

Hi,

If you want to hide the sticky header on the checkout page, add the below CSS code from the Appearance > Customize > Custom CSS.

.page-id-9 #site-header-sticky-wrapper {
    display: none;
}

Or, If you want the same sticky header with BG white and without transparency, use the below code.

 .page-id-9 .is-sticky #site-header {
    opacity: 1;
    background-color: #fff;
}

PS-please edits the page id and put your checkout page id.

Hi @abhikr781,

Neither of these worked. Tested on other pages as well but nothing changes.

Any idea why?

Thanks

Hi,

I apologize for that.
Have you tried with your page id?

Due to the maintenance mode unable to inspect the page. Can you please disable the maintenance mode? so I can inspect the page and give you the code accordingly.

Hi @abhikr781,

I disabled the maintenance mode.

Yes I tried with my page id.

Thanks