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.
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="-" />