0

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

  • you can add your content or div in a static block and display that block below your header via admin – Manoj Deswal Oct 4 '17 at 5:11
  • @Manoj Deswal Please explain more about how to do it. – Moe Hammadi Oct 4 '17 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 – Manoj Deswal Oct 4 '17 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 ? – Manoj Deswal Oct 4 '17 at 7:46
  • you are not using any navigation ? – Manoj Deswal Oct 4 '17 at 8:05
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>
  • Where to add this code? – Moe Hammadi Oct 3 '17 at 7:33
  • you can put above code after your referenceContainer ends. See my updated answer – Dinesh Yadav Oct 3 '17 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 – Moe Hammadi Oct 3 '17 at 8:10
  • see my updated answer – Dinesh Yadav Oct 3 '17 at 9:09
  • It is moved to the top of the header. I updated my question and posted the header html code. – Moe Hammadi Oct 3 '17 at 13:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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