How to add extra container to page header in Magento 2

Question

I am working on a new theme which is based on the Luma theme. I need to add a extra container to page header.my problem is that I can't identify how/where to add this.

Can anyone advise on what page i need to edit for this?

See the reference image

Answer 1

Add a container after="header.panel.wrapper" inside header.container. By the reference of the container add your template.

Inside your default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="header.container">
        <container name="header.containertwo" as="header_containertwo" label="Page Header Container"  htmlTag="header" htmlClass="header-mini-container" after="header.panel.wrapper"/>
    </referenceContainer>
<referenceContainer name="header.containertwo">
    <block class="Magento\Framework\View\Element\Template" name="header.mini.container" template="Vendor_Module::test.phtml"/>
</referenceContainer>
</page>

In the test.phtml

<div style="border:1px solid red;" id="test123"><p>This is a test</p></div>

Out put

Sample module

/app/code/Vendor/Module/registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_Module',
    __DIR__
);

/app/code/Vendor/Module/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Vendor_Module" setup_version="1.0.0" schema_version="1.0.0">
    </module>
</config>

/app/code/Vendor/Module/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="header.container">
        <container name="header.containertwo" as="header_containertwo" label="Page Header Container"  htmlTag="header" htmlClass="header-mini-container" after="header.panel.wrapper"/>
    </referenceContainer>
<referenceContainer name="header.containertwo">
    <block class="Magento\Framework\View\Element\Template" name="header.mini.container" template="Vendor_Module::test.phtml"/>
</referenceContainer>
</page>

/app/code/Vendor/Module/view/frontend/templates/test.phtml

<div style="border:1px solid red;" id="test123"><p>This is a test </p></div>

Answer 2

The simplest way is

Step one: Create a block in path:

app/design/frontend/Vendor/Theme/Magento_Theme/layout/default.xml

<referenceContainer name="header.container"><block class="Magento\Framework\View\Element\Template" name="custom_header" as="custom_header" template="Magento_Theme::html/customheader.phtml" before="-"/>

Step 2: Create phtml page path:

app/design/frontend/Vendor/Theme/Magento_Theme/templates/html/customheader.phtml

<h1>hello magento</h1>

Answer 3

Simple Way:

1. Create a block in path:app/design/frontend/Your_Vendor/Your_Theme/Magento_Theme/layout/default.xml

Content will be :

<referenceContainer name="header.container"><block class="Magento\Framework\View\Element\Template" name="custom_header" as="custom_header" template="Magento_Theme::html/customheader.phtml" before="-"/></referenceContainer>

2. Create custom.phtml page in path:app/design/frontend/Your_Vendor/Your_Theme/Magento_Theme/templates/html/customheader.phtml

content will be:

<h1>Your_Content_here</h1>