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
1 | $data[‘search’] = $this->load->controller(‘common/search’); |
Before
1 | return $this->load->view('common/menu', $data); |
STEP 2
Add the following in /catalog/view/theme/default/template/common/menu.twig
1 2 3 | <div class="col-sm-3 col-md-3 pull-right"> {{ search }} </div> |
Here is the full code
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | {% 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
1 2 3 | #search { margin-bottom: 10px;} |
Set margin-bottom:0px
STEP 4
Remove the following from /catalog/view/theme/default/template/common/header.twig
1 | {{ search }} |
So your menu will be look like below
