HostOnNet Blog

How to add a search box in OpenCart 3 nav menu

Looking for Linux Server Admin or WordPress Expert? We can help.

If you are using the default Opencart 3 theme, you can follow the below steps to add a search box in the menu bar.


Add the below lines in /catalog/controller/common/menu.php

$data[‘search’] = $this->load->controller(‘common/search’);


return $this->load->view('common/menu', $data);


Add the following in /catalog/view/theme/default/template/common/menu.twig

<div class="col-sm-3 col-md-3 pull-right">
        {{ search }}

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 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">{{ }}</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 }}">{{ }}</a></li>
                {% endfor %}
              {% endfor %}</div>
            <a href="{{ category.href }}" class="see-all">{{ text_all }} {{ }}</a> </div>
        {% else %}
        <li><a href="{{ category.href }}">{{ }}</a></li>
        {% endif %}
        {% endfor %}

      <div class="col-sm-3 col-md-3 pull-right">
        {{ search }}

{% endif %} 


Edit /catalog/view/theme/default/stylesheet/stylesheet.css and findout following

#search {
    margin-bottom: 10px;

Set margin-bottom:0px


Remove the following from /catalog/view/theme/default/template/common/header.twig

{{ search }}

So your menu will be look like below

Opencart menu with search bar

About Sibi Antony

Bootstrap and Android LOVER. I've been creating things for the web for over 10 years, from the period of flash and table based layout web sites till mobile and tab friendly web sites.
Posted in OpenCart

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.