Magento 2 – Moving Search to Navigation Section

layoutmagento2navigationsearch

Currently, I have this code in my default.xml

<referenceContainer name="page.top">
    <block class="Magento\Framework\View\Element\Template" name="top.search" as="topSearch" template="Magento_Search::form.mini.phtml"/>
</referenceContainer>

I'd like to move the search bar within the <nav> inside topmenu.html but I'm unsure of how to do that.

I tried <?php echo $this->getChildHtml('topSearch') ?> but that doesn't work.

Please help.

Best Answer

You have to add search block inside navigation block.

<block class="Magento\Theme\Block\Html\Topmenu" name="catalog.topnav" template="html/topmenu.phtml" ttl="3600" before="-">
    <block class="Magento\Framework\View\Element\Template" name="top.search" as="topSearch" template="Magento_Search::form.mini.phtml" />
</block>

Related Solutions

Magento 2 Themes – Theme Dependencies and Layout Updates

Whenever you have to override core layout file you have to keep only your required code inside xml not keep full xml code of your core file.

Keep inside your theme file, for default.xml

magento2/app/design/frontend/Vendor/themename/Magento_Theme/layout/default.xml

Now inside xml file,

<?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>
   <!-- keep your code here -->
</body>
</page>

Clean cache and your changes are display inside your site.

Magento 2 – How to Move Cart to Navigation Section

After move minicart to navigation section you must add child element in phtml file

<move element="minicart" destination="navigation.sections" />

Override vendor/magento/module-theme/view/frontend/templates/html/sections.phtml to your theme

Copy sections.phtml to

app/design/frontend/Vendor/theme/Magento_Theme/templates/html/sections.phtml

Now add child element in sections.phtml

<?php echo $this->getChildHtml('minicart') ?>

Flush cache and try.

Best Answer

Related Solutions

Magento 2 Themes – Theme Dependencies and Layout Updates

Magento 2 – How to Move Cart to Navigation Section

Related Topic