How to add search bar to menu bar in Magento2?
With file structure details explained.
Thank you
Add a comment
|
1 Answer
Here's how to move the search bar to the menu.
In theme_dir/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>
<move element="top.search" destination="store.menu" after="-"/>
</body>
</page>
You need to work with the css to get it to display the way you want. For example in theme_dir/web/css/source/_extend.less:
.block-search {
display: block;
position: absolute;
top: 0;
right: 0;
}
.nav-sections-item-content {
position: relative;
}
answered Oct 10, 2016 at 5:31
-
By adding above code no changes were done so i used this below line <move element="top.search" destination="catalog.topnav" after="-"/>– sanganCommented Dec 9, 2016 at 7:44
-
The code in the original answer worked for me. However, it removes the search block from the main page (because it moves it to the mobile menu).– RyreCommented Jun 5, 2017 at 9:51