If you are using the default Opencart 3 theme, you can follow the below steps to add a search box in the menu bar.
STEP 1
Add the below lines in /catalog/controller/common/menu.php
$data[‘search’] = $this->load->controller(‘common/search’);
Before
return $this->load->view('common/menu', $data);
STEP 2
Add the following in /catalog/view/theme/default/template/common/menu.twig
<div class="col-sm-3 col-md-3 pull-right"> {{ search }} </div>
Here is the full code
{% if categories %} <div class="container"> <nav id="menu" class="navbar"> <div class="navbar-header"><span id="category" class="visible-xs">{{ text_category }}</span> <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> {% for category in categories %} {% if category.children %} <li class="dropdown"><a href="{{ category.href }}" class="dropdown-toggle" data-toggle="dropdown">{{ category.name }}</a> <div class="dropdown-menu"> <div class="dropdown-inner"> {% for children in category.children|batch(category.children|length / category.column|round(1, 'ceil')) %} <ul class="list-unstyled"> {% for child in children %} <li><a href="{{ child.href }}">{{ child.name }}</a></li> {% endfor %} </ul> {% endfor %}</div> <a href="{{ category.href }}" class="see-all">{{ text_all }} {{ category.name }}</a> </div> </li> {% else %} <li><a href="{{ category.href }}">{{ category.name }}</a></li> {% endif %} {% endfor %} </ul> <div class="col-sm-3 col-md-3 pull-right"> {{ search }} </div> </div> </nav> </div> {% endif %}
STEP 3
Edit /catalog/view/theme/default/stylesheet/stylesheet.css and findout following
#search { margin-bottom: 10px; }
Set margin-bottom:0px
STEP 4
Remove the following from /catalog/view/theme/default/template/common/header.twig
{{ search }}
So your menu will be look like below
