5

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?

Improve this question
5

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.

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

This has worked for me 

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

It has moved the search div inside on nav.

Improve this answer
2
  • 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 '17 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.
    – Liam Mitchell
    Feb 26 '19 at 3:25
3

This has work for me 

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

It has moved the search div inside on navigation ul

Improve this answer
1
  • Yes my requirement is move search in navigation div.
    – Hitesh Koshti
    Feb 11 '20 at 10:14
2

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.

Improve this answer
1
  • 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>
    – Hitesh Koshti
    Oct 5 '15 at 6:26
0

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="-" /> )

Example

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

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.