Я использовал bootstrap и jquery cdn, чтобы оптимизировать свое приложение поверх мета. Я исправил некоторые из них, теперь 3 полоски вверху реагируют и сворачиваются или расширяются при нажатии. Тем не менее, значок корзины и кнопка входа скрыты за товаром (в магазине) на мобильном телефоне. (Если долго нажимать на картинку, вы заметите, что за ней скрыты две кнопки.) Есть предложения, как это исправить?
Вы можете посмотреть на веб-сайте здесь:
https://market-shaurya.herokuapp.com
Моя база html страница
<!DOCTYPE html>
{% load static %}
<html>
<head>
<title>Ecom</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="height:80px">
<a style="font-size:33px; color: #ffae00" class="navbar-brand" href="{% url 'store' %}"><strong><strong>Ma₹ket</strong></strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'store' %}">Items(Store) <span class="sr-only">(current)</span></a>
</li>
</ul>
{% block right_panel %}
<form class="form-inline mr-auto my-lg-0" method="get">
<!--<input class="form-control mr-sm-2" style="width:1000px; height:38px;" type="text" placeholder="Search for items" aria-label="Search">-->
{{myFilter.form}}
<button class="btn btn-outline-warning btn-rounded btn-sm ml-2 my-0" style="width:80px; height:38px" type="submit">Search</button>
</form>
{% endblock %}
{% if user.is_authenticated %}
<div class="form-inline my-2 my-lg-0">
<span class="hello-msg"><strong></strong>Hello, {{ request.user }}</strong></span>
<a href="{% url 'logout' %}" class="btn btn-danger">Logout</a>
<a href="{% url 'cart' %}">
<img id="cart-icon" src="{% static 'images/cart.png' %}">
</a>
<p id="cart-total">{{cartItems}}</p>
</div>
{% else %}
{% block left_panel %}
<div class="form-inline my-2 my-lg-0">
<a href="{% url 'login' %}" class="btn btn-success">Login</a>
<a href="{% url 'cart' %}">
<img id="cart-icon" src="{% static 'images/cart.png' %}">
</a>
<p id="cart-total">{{cartItems}}</p>
</div>
{% endblock %}
{% endif %}
</div>
</nav>
<hr>
<div class="container">
<br>
{% block content %}
{% endblock content %}
</div>
</body>
<!-- jQuery !-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<!-- jQuery UI !-->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script type="text/javascript" src="{% static 'js/cart.js' %}"></script>
</html>