1

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

7
  • you can add your content or div in a static block and display that block below your header via admin Commented Oct 4, 2017 at 5:11
  • @Manoj Deswal Please explain more about how to do it. Commented Oct 4, 2017 at 7:38
  • share current screenshot of your header and also inspect your header in browser and take screenshot ...... if you have live URL you can share that Commented Oct 4, 2017 at 7:45
  • you knows creating block and content in that ... just need to tell how to show that below header ..... is it above navigation or below navigation ? Commented Oct 4, 2017 at 7:46
  • you are not using any navigation ? Commented Oct 4, 2017 at 8:05

1 Answer 1

4

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>
8
  • Where to add this code? Commented Oct 3, 2017 at 7:33
  • you can put above code after your referenceContainer ends. See my updated answer Commented Oct 3, 2017 at 7:51
  • Please check the new image in the updated answer. After aadding the move tag , the div moved inside the panel wrapper. However i want it below the search bar Commented Oct 3, 2017 at 8:10
  • see my updated answer Commented Oct 3, 2017 at 9:09
  • It is moved to the top of the header. I updated my question and posted the header html code. Commented Oct 3, 2017 at 13:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.