Currently, I have this code in my default.xml

<referenceContainer name="page.top">
    <block class="Magento\Framework\View\Element\Template" name="top.search" as="topSearch" template="Magento_Search::form.mini.phtml"/>

I'd like to move the search bar within the <nav> inside topmenu.html but I'm unsure of how to do that.

I tried <?php echo $this->getChildHtml('topSearch') ?> but that doesn't work.

Please help.

enter image description here

2 Answers 2


You have to add search block inside navigation block.

<block class="Magento\Theme\Block\Html\Topmenu" name="catalog.topnav" template="html/topmenu.phtml" ttl="3600" before="-">
    <block class="Magento\Framework\View\Element\Template" name="top.search" as="topSearch" template="Magento_Search::form.mini.phtml" />
  • oOOO okies, now I understand. But it seems when adding anything within the nav block, in mobile view, the navigation no longer function the same. In that, the navigation stays on the page vs hidden until you hit the hamburger icon and it slides in from the left. Any idea how I can how keep that function with the search bar in there?
    – Amy Ling
    Sep 27, 2016 at 19:12
  • Above code working for desktop ? Sep 28, 2016 at 4:36
  • it is working for desktop yes. Just not right for mobile.
    – Amy Ling
    Sep 28, 2016 at 19:31

You can put this xml code in yout theme.xml:

<move element="top.search" destination="page.top" after="catalog.topnav" />
  • Thanks, I tried that but I had to add the actual top search block into my xml. It wasn't already existing where I can just move it if that makes any sense.
    – Amy Ling
    Sep 27, 2016 at 19:13

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.