magento2
I am trying to move the search bar next to the logo on our website but not having any luck.
My theme is based on magento luma.
I have the below code
<move element="block.search" destination="header.wrapper" after="logo" />
inside of
mytheme/theme/layout/default.xml
but the changes aren't being reflected.
I have also tried the below code.
<move element="top.search" destination="header.wrapper" after="logo" />
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>
Try this solution, it's should help:
your_theme_root/Magento_Theme/layout/default.xml
<?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>
<referenceContainer name="header.container" htmlClass="header-container">
<block class="Magento\Framework\View\Element\Template" name="header.custom" template="Magento_Theme::header.phtml" />
</referenceContainer>
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/logo.jpg</argument>
<argument name="logo_img_width" xsi:type="number">341</argument>
<argument name="logo_img_height" xsi:type="number">60</argument>
</arguments>
</referenceBlock>
<referenceContainer name="header.panel.wrapper" remove="true" />
<referenceContainer name="header-wrapper" remove="true" />
<move element="logo" destination="header.custom" />
<move element="header" destination="header.custom" />
<move element="top.links" destination="header.custom" />
<move element="store_language" destination="header.custom" />
</body>
</page>
your_theme_root/Magento_Search/layout/default.xml
<?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="header.custom" />
</body>
</page>
your_theme_root/Magento_Checkout/layout/default.xml
<?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="minicart" destination="header.custom" />
</body>
</page>
your_theme_root/Magento_Theme/templates/header.phtml
<?php
/**
* Custom header template
*
* @var $block \Magento\Framework\View\Element\Template
*/
?>
<div class="header">
<?= $block->getChildHtml('logo') ?>
<div class="quick-access">
<?= $block->getChildHtml('topSearch') ?>
<?= $block->getChildHtml('header') ?>
<?= $block->getChildHtml('top.links') ?>
<?= $block->getChildHtml('store_language') ?>
</div>
<?= $block->getChildHtml('minicart') ?>
</div>
It is works for me very well:
Best Answer
Use this code