I'm facing an issue where the toggle bar is not displaying on large screens, only on medium size and below.
While attempting to use display attributes to hide some components under the toggle bar on larger screens, I could not get the toggle bar itself to appear on these screens.
Additionally, I would like to identify the class associated with the toggle bar so that I can manually style it.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-bottom header-sticky">
<div class="container-fluid">
<div class="row align-items-center">
<!-- Logo -->
<div class="col-xl-1 col-lg-1 col-md-1 col-sm-3">
<div class="logo">
<a href="/"><img src="{% static 'assets/img/logo/logoimage.jpg' %}" alt=""></a>
</div>
</div>
<div class="col-xl-6 col-lg-8 col-md-7 col-sm-5">
<!-- Main-menu -->
<div class=" f-right d-none d-xl-block">
<nav>
<ul id="navigation">
<li><a href="/">Home</a></li>
<li class="hot"><a href="/category/">Products</a>
<ul class="submenu">
<li><a href="/category/"> Categories </a>
<ul class="submenu">
{% for i in types %}
<li><a href="/category/#{{i.type}}"> {{i.type}} </a></li>
{% endfor %}
</ul>
</li>
</ul>
</li>
<li><a href="/contact/">Contact</a></li>
<li class="d-block d-lg-none">
<a href="cart.html"><i class="fas fa-shopping-cart">Cart</i></a>
</li>
<li class="d-block d-lg-none"> <a href="/signup/" class="btn header-btn">Sign Up</a>
</li>
</li>
<li class="d-block d-lg-none"> <a href="/login/" class="btn header-btn">Login</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="col-xl-5 col-lg-3 col-md-3 col-sm-3 fix-card">
<ul class="header-right f-right d-none d-xl-block d-flex justify-content-between">
<li class="d-none d-xl-block">
<div class="shopping-card">
<a href="cart.html"><i class="fas fa-shopping-cart"></i></a>
</div>
</li>
<li class="d-none d-xl-block"> <a href="/signup/" class="btn header-btn">Sign Up</a>
</li>
</li>
<li class="d-none d-xl-block"> <a href="/login/" class="btn header-btn">Login</a>
</li>
</ul>
</div>
<!-- Mobile Menu -->
<div class="col-12">
<div class="mobile_menu d-block d-lg-none"></div>
</div>
</div>
</div>
</div>
</div>The bootstrap version being used is: 4.1.3