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?

7ochem
7,61516 gold badges54 silver badges82 bronze badges
asked Oct 3, 2015 at 11:59

6 Answers 6

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.

7ochem
7,61516 gold badges54 silver badges82 bronze badges
answered Jul 20, 2016 at 10:14
2
  • We are just moving the section then why we need to call <?php echo $block->getChildHtml('topSearch'); ?> in section file? Commented Apr 22, 2018 at 13:15
  • @Zaheerabbas, I was not aware of this when I had started digging into Magento 2 late 2015 Commented Aug 21, 2018 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.

answered Aug 8, 2016 at 6:00
2
  • 1
    For me, its in the UL-element, not in nav. Im using Magento 2.1.3. An idea whats wrong here? Commented 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. Commented Feb 26, 2019 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

answered Feb 2, 2017 at 5:34
1
  • Yes my requirement is move search in navigation div. Commented Feb 11, 2020 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.

answered Oct 3, 2015 at 13:44
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> Commented Oct 5, 2015 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.
answered May 26, 2021 at 12:59
0

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">
 <body>
 <!-- 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">
 <arguments>
 <argument name="configProvider" xsi:type="object">Magento\Search\ViewModel\ConfigProvider</argument>
 </arguments>
 </block>
 </referenceBlock>
 </body>
</page>

  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>

with

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

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.