3

Using Magento 2 with my child theme of Luma I would rather the checkout pages showed the header and footer. Thanks to this thread I have found how to add most of it back in. The only bit I am struggling with adding back in is the main menu. Presumably this also needs adding in my checkout_index_index.xml file? It currently looks like this:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="minicart" remove="false"/>
        <referenceContainer name="header.panel" remove="false"/>
        <referenceBlock name="top.search" remove="false"/>
        <referenceBlock name="catalog.compare.link" remove="true"/>
        <referenceBlock name="catalog.topnav" remove="false"/>
        <referenceContainer name="footer-container" remove="false"/>
    </body>
</page>
Improve this question

3 Answers 3

Reset to default
3

In your theme directory create file app/design/frontend/Sims/luma/Magento_Checkout/layout/checkout_index_index.xml

Menu container should be added here like it being done for 1column.xml layout

<?xml version="1.0"?>

<page layout="checkout" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="page.wrapper">
            <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
            <container name="page.top" as="page_top" label="After Page Header" after="header.container" />
            <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/>
        </referenceContainer>
        <move element="logo" destination="header-wrapper" before="-"/>
    </body>
</page>

In this example header and footed added also but "page.top" is responsible for navigation menu

In second step should be rewritten styles

.checkout-index-index .nav-sections, .checkout-index-index .nav-toggle {
    display: none;
}

With something like this:

.checkout-index-index {
    .nav-sections {
        display: block;
    }
}
Improve this answer
2

Actually I have just noticed that by default this is added: 

.checkout-index-index .nav-sections, .checkout-index-index .nav-toggle {
    display: none;
}

Which obviously can be overridden. So if anyone has the same problem just change that to display block instead.

Improve this answer
0

Change: layout="checkout" to "1column" Remove the css because allready exist and Done!

Improve this answer
1
  • Yes, this is the simple way. Remove the css he means file: app/design/frontend/Vendor/themename/Magento_Checkout/web/css/source/module/checkout/_checkout.less Line: 55 Remove "display: none"
    – De Nguyen
    Commented Sep 7, 2020 at 16:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.