Magento 2 – Creating Custom Header Extending Magento Blank

containerslayoutmagento-2.0magento2template

I am trying to create a theme with Magento Blank as parent in Magento 2 but I can't figure it out how to change the header with a custom one.

I first remove header.container from magento blank and create my container but it is created inside page-wrapper between main-content and footer and I can't make it go before main-content.

This is my layout.xml:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="register-link" remove="true" />
        <referenceBlock name="authorization-link" remove="true" />
        <referenceBlock name="wish-list-link" remove="true" />
        <referenceBlock name="my-account-link" remove="true" />
        <referenceBlock name="top.links" remove="true" />
        <referenceBlock name="header.panel.wrapper" remove="true" />
        <referenceBlock name="header.container" remove="true" />

        <referenceContainer name="page.wrapper">
            <container name="custom.header" htmlClass="headerSection" htmlTag="div">
                <block class="Magento\Framework\View\Element\Template" name="navigation.sections" before="-" template="Magento_Theme::html/sections.phtml">

                </block>
            </container>
        </referenceContainer>

    </body>
</page>

And this is how it looks the HTML:

Best Answer

Well this is because your before attribute is not set.

To fix that, replace:

<container name="custom.header" htmlClass="headerSection" htmlTag="div">

With:

<container name="custom.header" htmlClass="headerSection" htmlTag="div" before="main.content">

Related Solutions

Magento – magento 2 captcha not rendering if I override layout xml

Anyway I have solved it myself.The captcha is not rendering due to I haven't override captcha layout xml so overriding it to your theme will solved issue.

Magento 2 – Creating a Custom Homepage Template

First of all, we need to know how to create a custom theme Magento 2, we can more here: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html

After creating a new custom theme. We're going to create new custom layout for our homepage. For example, our folder structure:

We should focus on two xml files: layouts.xml and page_layout/custom_home.xml under Magento_Theme folder

app/design/frontend/Boolfly/book/Magento_Theme/layouts.xml

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
              xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">

    <layout id="custom_home">
        <label translate="true">Custom Home</label>
    </layout>

</page_layouts>

The layout id custom_home is the name of page layout below.

app/design/frontend/Boolfly/book/Magento_Theme/page_layout/custom_home.xml (I made a copy from 1column.xml default)

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
        xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <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>
</layout>

Login to Magento Admin, find cms home page. Now, our custom layout home page is in the list of layouts:

If we choose this layout, we can see it on the front page:

Note: Sure that our Magento cache was cleared.

Related Topic