How Can I move a search bar in Navigation div in Magento 2 via XML?

September 7, 2015 - Magento 2

Magento 2 Development

You can put a search box after the navigation block and use css to make display it in one line, since html/topmenu.phtml block doesn’t print its child’s

<move element="top.search" destination="page.top" after="catalog.topnav" />

1	<move element="top.search" destination="page.top" after="catalog.topnav" />

Alternatively, you can overwrite html/topmenu.phtml to

<?php $columnsLimit = $block->getColumnsLimit() ?: 0; ?> <?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit) ?> <nav 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>

<?php $columnsLimit = $block->getColumnsLimit() ?: 0; ?> <?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit) ?> <nav 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>

More tips from Magento 2 Developer’s Cookbook

Source (Magento Stackexchange Question) (KAndy)

← Previous Post Next Post →

Magento 2 Google Sheets Integration Guide

Have you ever known that importing data to Magento 2 from Google Sheets is possible? It is not a joke,… Read more…
Magento 2 Page Builder Import & Export

In the following article, we shed light on Magento 2 Page Builder. You will learn its core features. After that,… Read more…
How to Import Custom CSV to Magento 2 Programmatically

Let's discuss the Magento 2 import of custom CSV files. Recently, we've been surfing across endless StackExchange discussions and stumbled… Read more…
How to Import Magento 2 Product by Store View?

You've come to the right place if you run a multilingual storefront or use several different store views. Below, we… Read more…
Magento 2 MSI User Guide: How to Import & Export Magento 2 MSI (Multi Source Inventory)

This Magento 2 MSI user guide briefly explains the platform's multi-source inventory functionality and then focuses on the Magento 2… Read more…
Magento Error Log to Debug Magento 2 Import & Export

Today, we are going to discuss the Magento error log for import and export processes. Since Magento 2 doesn’t have any… Read more…
Magento 2 Import of Custom Attributes: How to Import Products with Custom Attributes to Magento 2

When you import products to Magento 2, you may face various difficulties. Transferring them to your website without headaches is… Read more…
How to Import Data via REST API into Magento 2

Today, we'd like to draw your attention to the Magento 2 REST API Import. Depending on the edition of your… Read more…
How to Create a Custom Import in Magento 2

Although the default import and export instruments of Magento 2 are enough to satisfy the basic data transfer needs, you… Read more…
Magento 2 Import: How To Fix Value For Attribute Contains Incorrect Value Error

In the following article, you will discover a universal algorithm for solving Magento 2 errors associated with incorrect attribute values.… Read more…
Magento 2 Imported Resource (Image) Could Not Be Downloaded: How To Fix This Magento 2 Import Error

In the following article, we explore a problem that prevents Magento users from importing images. You may be familiar with… Read more…
Magento 2 General System Exception Happened: How To Fix Error During Magento 2 Import

If you regularly deal with Magento 2 import processes, you might have faced the following message: General System Exception Happened.… Read more…
How to Import & Export Product Attributes for Magento 2 (Along with Attribute Values & Sets)

Today, we are going to talk about the import and export of product attributes for Magento 2. Operating an e-commerce store… Read more…
How to Import Product Images into Magento 2 in Bulk

Below, we describe how to import product images in Magento 2 using CSV. Since it is a part of a product… Read more…
Magento 2 Bulk API & Asynchronous Import

Below, we discuss the Magento 2 bulk API and the corresponding asynchronous import processes. After a short introduction to the… Read more…
How to Import Database in Magento 2

Recently, we’ve spotted a question on StackExchange regarding the Magento 2 database import. David Duong faced problems while transferring a… Read more…
Magento 2 B2B Requisition List Guide: How to Manage & Import Requisition Lists in Magento 2

In the following article, we explain what a requisition list of Magento 2 is - a feature exclusively available in Adobe… Read more…
Magento 2 Shared Catalog Guide: How to Import and Export Shared Catalogs in Magento 2

The following article explores Magento 2 shared catalogs - a B2B entity exclusively available to Adobe Commerce users. You will learn what a… Read more…
Magento 2 B2B Company Guide: Revealing Company Structure & Import

If you want to migrate from the existing Magento B2B website, you may face a problem when companies cannot be… Read more…
How to Import & Export Magento 2 Gift Cards

Gift cards are a useful addition to every e-commerce website. They are frequently used on e-commerce websites with any assortment:… Read more…

Related posts