Archived topic
Distraction free Checkout
7 replies · Started by Matt on September 28, 2020
I have the distraction-free setting checked for Woocommerce checkout but it only seems to have disabled the footer and the entire header still shows. Perhaps it's where there's a lot of custom css to get it styled correctly.
I've disabled the secondary nav just on the checkout page without an issue but using the same .page-id-xxxxx method (below) for the primary nav removes it from all pages and not just the checkout. V odd. Can you suggest the best method to achieve this?
.page-id-xxxxxx .nav-aligned-right .main-navigation .menu>li {
display:none;}
Hi there,
you should be able to disable any elements using the Layout Element:
https://docs.generatepress.com/article/layout-element-overview/
The display rules would be Page > Checkout
That's handy! It didn't do exactly as I need - because the primary nav is the header - it removes my site logo too. Would it be best to add my site logo directly to the page above checkout shortcode?
Hmm CSS solution would probably be the easiest in this case.
Can you link me to the page in question?
Try this CSS:
body.woocommerce-checkout .main-nav {
display: none;
}Thanks Leo - that's done the job.
To help my knowledge - how come page-id-xxxx method worked for secondary nav but not for the main nav?
Page ID should work as well:
body.page-id-250072 .main-nav {
display: none;
}