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 | |
  • 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
3

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 | |
  • 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
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 | |
  • 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> – hweb87 Oct 5 '15 at 6:26
2

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 | |
  • Yes my requirement is move search in navigation div. – hweb87 Feb 11 at 10:14

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.