Magento 2.1.5 – Add New Div Below Search Bar in Header

magento2.1.5

I need to add a new div at the bottom of the header. I am using magento 2.1.5.

I want to do this by creating a new module. I checked lots of tutorials. I am able to add a div to the top of the header but not in the bottom. Here is my code:

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="Header_CustomDiv::test.phtml" after="header.panel.wrapper"/>
    </referenceContainer>
</page>

view/frontend/template/test.phtml

<div style="border:1px solid red;" id="test123"><p>Text Here  </p></div>

The above code adds a div to the top of the header, however I want it at the bottom as in image.
enter image description here

Here is the header html code:

<header class="page-header">
    <div class="header content">
        <span data-action="toggle-nav" class="action nav-toggle">
            <span>Toggle Nav</span>
        </span>
        <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2 no-pad-left logo">
            Logo here
        </div>
        <div class="block block-search col-lg-5 col-lg-offset col-sm-9">
            <div class="block block-title"><strong>Search</strong></div>
            <div class="block block-content">
                Search form  here
            </div>
        </div>
        <ul class="compare wrapper">
            <li class="item link compare" data-bind="scope: 'compareProducts'" data-role="compare-products-link">
            </li>
        </ul>
        .
        .
        .
        .
        .
        <li class="authorization-link" data-label="or">
            <a href="#">
                Sign In    </a>
        </li>
        <li><a href="#">Create an Account</a></li></ul></div></div>

        <div data-block="minicart" class="minicart-wrapper">
            <a class="action showcart" href="#" data-bind="scope: 'minicart_content'">
                <span class="text">My Cart</span>
            </a>
        </div>      
    </div>
</header>

After adding the move tag as mentioned by Dinesh Yadav :

<move element="header.mini.container" destination="header.panel.wrapper" after="-" />

enter image description here

Best Answer

If you want to move your custom phtml file after search box, try below code

<referenceContainer name="header-wrapper">
      <block class="Magento\Framework\View\Element\Template" name="test.header" template="Vendor_Module::test.phtml" after="topSearch" />
</referenceContainer>
Related Topic