How to disable menu display in Opencart?

Z

Zakonoposlushniy2017-12-12 10:15:54

css

Zakonoposlushniy, 2017-12-12 10:15:54

Hello!
How can I disable the display of menus with categories in Opencart on computers?
Look, there is a website: https://wool.opt.lv/
Now its categories are displayed in the main menu at the top and in the column on the right.
I want the column on the right to remain and the main menu (which has a blue background) to be hidden on computers.
How can this be done?
A person wrote to me that I need to add : hidden-lg and hidden-md to the menu class in the "header.tpl" file .
But I don't know exactly where.
Here is the code for this file

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="{{ direction }}" lang="{{ lang }}" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="{{ direction }}" lang="{{ lang }}" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="{{ direction }}" lang="{{ lang }}">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ title }}</title>
<base href="{{ base }}" />
{% if description %}
<meta name="description" content="{{ description }}" />
{% endif %}
{% if keywords %}
<meta name="keywords" content="{{ keywords }}" />
{% endif %}
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
{% for style in styles %}
<link href="{{ style.href }}" type="text/css" rel="{{ style.rel }}" media="{{ style.media }}" />
{% endfor %}
{% for script in scripts %}
<script src="{{ script }}" type="text/javascript"></script>
{% endfor %}
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
{% for link in links %}
<link href="{{ link.href }}" rel="{{ link.rel }}" />
{% endfor %}
{% for analytic in analytics %}
{{ analytic }}
{% endfor %}
</head>
<body>
<nav id="top">
  <div class="container">{{ currency }}
    {{ language }}
    <div id="top-links" class="nav pull-right">
      <ul class="list-inline">
        <li><a href="{{ contact }}"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md">{{ telephone }}</span></li>
        <li class="dropdown"><a href="{{ account }}" title="{{ text_account }}" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_account }}</span> <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right">
            {% if logged %}
            <li><a href="{{ account }}">{{ text_account }}</a></li>
            <li><a href="{{ order }}">{{ text_order }}</a></li>
            <li><a href="{{ transaction }}">{{ text_transaction }}</a></li>
            <li><a href="{{ download }}">{{ text_download }}</a></li>
            <li><a href="{{ logout }}">{{ text_logout }}</a></li>
            {% else %}
            <li><a href="{{ register }}">{{ text_register }}</a></li>
            <li><a href="{{ login }}">{{ text_login }}</a></li>
            {% endif %}
          </ul>
        </li>
        <li><a href="{{ wishlist }}" id="wishlist-total" title="{{ text_wishlist }}"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_wishlist }}</span></a></li>
        <li><a href="{{ shopping_cart }}" title="{{ text_shopping_cart }}"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_shopping_cart }}</span></a></li>
        <li><a href="{{ checkout }}" title="{{ text_checkout }}"><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_checkout }}</span></a></li>
      </ul>
    </div>
  </div>
</nav>
<header>
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div id="logo">{% if logo %}<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>{% else %}
          <h1><a href="{{ home }}">{{ name }}</a></h1>
          {% endif %}</div>
      </div>
      <div class="col-sm-5">{{ search }}</div>
      <div class="col-sm-3">{{ cart }}</div>
    </div>
  </div>
</header>
{{ menu }}

Thanks to!

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

Z

Zakonoposlushniy, 2017-12-12
@Zakonoposlushniy

The person on the forum suggested a solution that works.
In the styles (at the end) you need to add this:

@media (min-width: 768px){
#menu {
    display:none;
  }
}

Maybe someone will come in handy)
PS The Opencart version is a troika.

D

Dmitry Kuznetsov, 2017-12-12
@dima9595

In your code there is no menu itself, or rather the code itself in html. Somewhere in the view you should have a module that is responsible for displaying this (blue) menu. Look for it in the files, and there just add the necessary values to its class.

E

Egor Zhivagin, 2017-12-12
@Krasnodar_etc

Search in your files

<div class="collapse navbar-collapse navbar-ex1-collapse">

(looked in the inspector on the page)
Him and add the necessary classes

M

Moris Haos, 2017-12-12
@morihaos

Hello,
In your version of Opencart, the menu code is separated into a separate menu.tpl template, so there are three options:
1) put attributes in menu.tpl, as mentioned earlier (though I don’t know if this will work or not),
2) in header.tpl comment out the menu call:

<!--
{{ menu }}
-->

3) in header.tpl delete the line with {{ menu }}.
These files are located in catalog/view/theme/default/template/