How Can I move Search bar section in Navigation div Magento2 using XML.

I have used below code but it's not working:

<move element="top.search" destination="catalog.topnav" before="-"/>

Any one have idea for how to move search bar in Navigation div?

6 Answers 6


Add the following line into yourtheme/layout/default.xml

<move element="top.search" destination="navigation.sections" after="catalog.topnav" />

Copy sections.phtml from module-theme/view/frontend/templates/html/sections.phtml to yourtheme/templates/html/sections.phtml

Now open this file and put the following line of code after class="section-items" DIV

 <?php echo $block->getChildHtml('topSearch'); ?>

This is working for me.

  • We are just moving the section then why we need to call <?php echo $block->getChildHtml('topSearch'); ?> in section file?
    – Zahirabbas
    Apr 22, 2018 at 13:15
  • @Zaheerabbas, I was not aware of this when I had started digging into Magento 2 late 2015 Aug 21, 2018 at 12:36

This has worked for me

<move element="top.search" destination="catalog.topnav" after="-" />

It has moved the search div inside on nav.

  • 1
    For me, its in the UL-element, not in nav. Im using Magento 2.1.3. An idea whats wrong here?
    – Max
    Jan 24, 2017 at 22:38
  • This works ish, but when on mobile view it would be in the side menu. (Weltpixel theme) Might need it to go up a level or two in the DOM. Feb 26, 2019 at 3:25

This has work for me

<move element="top.search" destination="catalog.topnav" after="-"/>

It has moved the search div inside on navigation ul

  • Yes my requirement is move search in navigation div. Feb 11, 2020 at 10:14

Looks like you need put search box after navigation block and use css to make display it in one line, beckouse html/topmenu.phtml block don't print their child's

<move element="top.search" destination="page.top" after="catalog.topnav" />

or overwrite html/topmenu.phtml to

<?php $columnsLimit = $block->getColumnsLimit() ?: 0; ?>
<?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit) ?>

<nav class="navigation" role="navigation">
    <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
        <?php echo $_menu; ?>
    <?php echo $block->getChildHtml() ?>

Also feel free to create issue on github or create pull request with fix.

  • Thanks for reply, I have tried both way but it's not working properly. Currently Search section in "header content" div. I need search div in <nav class="navigation" role="navigation"> </nav> Oct 5, 2015 at 6:26

Follow these steps. It works on Mag2.3 version

  1. Open default.xml file ( app/design/frontend/Vendor_Name/Theme_Name/Magento_Theme/layout/default.xml) and add this code( <move element="top.search" destination="store.menu" after="-" /> )


<?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">
         <move element="top.search" destination="store.menu" after="-" />
  1. Go to admin > system > cache management and flush cache.

To move the search bar from header to the colored navigation menu (with category links), you just have to:

  1. create a file: src/app/design/frontend/[Vendor_Name]/[Theme_Name]/Magento_Theme/layout/default.xml

  2. put this:

<?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">
        <!-- Move top.search in navigation menu -->
        <referenceBlock name="catalog.topnav">
            <block class="Magento\Framework\View\Element\Template" name="top.search" as="topSearch" template="Magento_Search::form.mini.phtml">
                    <argument name="configProvider" xsi:type="object">Magento\Search\ViewModel\ConfigProvider</argument>
  1. then copy: /src/vendor/magento/module-theme/view/frontend/templates/html/topmenu.phtml to your theme src/app/design/frontend/[Vendor_Name]/[Theme_Name]/Magento_Theme/templates/html/topmenu.phtml

  2. in topmenu.phtml replace

    <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
        <?= /* @noEscape */ $_menuHtml?>
        <?= $block->getChildHtml() ?>


    <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
        <?= /* @noEscape */ $_menuHtml?>
    <?= $block->getBlockHtml('top.search') ?>
  1. regenerate static files

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.