Magento 2 - moving search box to Navigation area

Question

I want to move search box to the right side of category lists on top navigation menu:

I've added the following line in Magento_Theme/layout/default.xml which moved search box to the desired position ( image above is the result ) :

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

However, when I click on the box to insert text the cursor jumps out of focus immediately. But if I right click into the box -> paste data there and press Enter or magnifier icon, search function still work.

What else do I need to add to my code to make it work, or is there another solution?

Answer 1

Your search is working but not letting you click into it because one class is added into it that is ui-menu-item & that because it is been added into catalog.topnav block.So the js (menu.js) of this adds ui-menu-item to it look the below code (You can check it by inspect element in your browser).

<div class="block block-search ui-menu-item" role="presentation">

When you remove class ui-menu-item from this dive it will work but it is not feasible there when you add this to the catalog.topnav so better would be add this code into your default.xml file

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

Instead of the code you added to it & just target your <div class="block block-search"> there & add a css for it like this

.block.block-search {display: block;}

For better look & feel do adjust it with your own css.

Note: While you are doing this make sure your cache is disable or run the below command to see the output

Do this changes by creating your own theme instead of editing the core files it is not a best practice for magento development.

php bin/magento cache:flush