My intention was to collapse the Bootstrap navbar when the screen width reaches 1280px. However, instead of collapsing, the navbar appears at the top. Here is the code snippet I am using:
body {
padding-top: 90px;
}
@media (min-width: 1280px) {
body {
padding-top: 0;
}
}
@media (min-width: 1280px) {
body {
margin-left: 232px;
}
}
.navbar.fixed-left {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
}
/* More CSS rules here */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet"
id="theme_link"
href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/materia/bootstrap.min.css"/>
<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-left">
<a class="navbar-brand" href>Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
/* More HTML markup here */
</button>
/* More HTML markup here */
</ul>
<ul class="navbar-nav">
/* More Navbar elements here */
</li>
</ul>
</div>
</nav>
/* More HTML and Bootstrap components here */
</div>
In my media queries, I specified 1280px as the threshold, but despite this, the navbar does not collapse as expected. Instead, it remains visible as a topbar. What could be causing this issue?