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

Question

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?

Answer 1

This has work for me

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

It has moved the search div inside on navigation ul

Answer 2

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.

Answer 3

This has worked for me

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

It has moved the search div inside on nav.

Answer 4

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; ?>
    </ul>
    <?php echo $block->getChildHtml() ?>
</nav>

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