Magento 2 – Adding Navigation Bar in Checkout Page

checkoutheaderlayoutmagento2navigation

I am developing a custom theme in magento 2.1.7. Everything goes fine till I reached checkout page. There were no header and footer found in checkout page. It seems like magento 2's default behavior. But here in my case I need to show the menu bar and other header links in header and footer. I managed to bring up minicart and search in header. But I couldn't add navigation menu.
This is my

app/design/frontend/vendor/theme/Magento_Checkout/layout/checkout_index_index.xml

file

     <referenceContainer name="page.messages" remove="false"/>
    <move element="logo" destination="header-wrapper"/>
     <move element="minicart" destination="header-wrapper" before="top.links"/>
    <referenceContainer name="catalog.topnav" remove="false"/>
    <move element="catalog.topnav" destination="header-wrapper" after="top.search"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header container" before="main.content">
        </container>
        <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>
</body>

I have checked many websites and some of them suggested it would be hidden in css. But I couldn't find the DOM for menu in page source. Can any one helps me out?

Best Answer

Please copy checkout_index_index.xml from path vendor/magento/module-checkout/view/frontend/layout/ to your theme path app/design/frontend/vendor/theme/Magento_Checkout/layout/.

In the default file you can see layout="checkout". See below.

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

So just need to replace that layout="1column". So it looks like below.

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

After this clean your cache folders manually (var/page_cache and var/cache). Now visit the checkout page. You can see both header and footer are coming now.

Related Topic