Magento – Magento 2: Add main menu to checkout page

checkoutlayoutmagento2onepage-checkoutxml

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>

Best Answer

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;
    }
}