HostOnNet Blog

How to add a search box in OpenCart 3 nav menu

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

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