Cannot collapse bootstrap navbar on specific resolution - html

Question

I'm trying to collapse the Bootstrap navbar when the screen width is 1280px but instead of getting the navbar collapsed, the Navbar goes on top, this is my code:
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;
}
#media (min-width: 1280px) {
.navbar.fixed-left {
bottom: 0;
width: 232px;
flex-flow: column nowrap;
align-items: flex-start;
}
.navbar.fixed-left .navbar-collapse {
flex-grow: 0;
flex-direction: column;
width: 100%;
}
.navbar.fixed-left .navbar-collapse .navbar-nav {
flex-direction: column;
width: 100%;
}
.navbar.fixed-left .navbar-collapse .navbar-nav .nav-item {
width: 100%;
}
.navbar.fixed-left .navbar-collapse .navbar-nav .nav-item .dropdown-menu {
top: 0;
}
}
#media (min-width: 1280px) {
.navbar.fixed-left {
right: auto;
}
.navbar.fixed-left .navbar-nav .nav-item .dropdown-toggle:after {
border-top: 0.3em solid transparent;
border-left: 0.3em solid;
border-bottom: 0.3em solid transparent;
border-right: none;
vertical-align: baseline;
}
.navbar.fixed-left .navbar-nav .nav-item .dropdown-menu {
left: 100%;
}
}
<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">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">About</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item">Action</a>
<a class="dropdown-item">Another action</a>
<a class="dropdown-item">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Separated link</a>
<a class="dropdown-item">One more separated link</a>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-class="fixed-left">
<i class="fa fa-arrow-left"></i>
Fixed Left
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-class="fixed-top">
<i class="fa fa-arrow-up"></i>
Fixed Top
<small>(original)</small>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-class="fixed-right">
<i class="fa fa-arrow-right"></i>
Fixed Right
</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1 class="display-4">
Bootstrap Navbar Sidebar
<br>
<small>Fixed to Left or Right</small>
</h1>
<p>
<strong>
Use classic Bootstrap navbar as sidebar, on left or right side.
</strong>
</p>
<p>
<a class="github-button" href="https://github.com/mladenplavsic/bootstrap-navbar-sidebar"
data-icon="octicon-star" data-show-count="true"
aria-label="Star mladenplavsic/bootstrap-navbar-sidebar on GitHub">Star</a>
<a class="github-button" href="https://github.com/mladenplavsic/bootstrap-navbar-sidebar/fork"
data-icon="octicon-repo-forked" data-show-count="true"
aria-label="Fork mladenplavsic/bootstrap-navbar-sidebar on GitHub">Fork</a>
<a class="github-button" href="https://github.com/mladenplavsic"
aria-label="Follow #mladenplavsic on GitHub">Follow #mladenplavsic</a>
</p>
<p>Same as when using <code>.fixed-top</code> for navbar - add class <code>.fixed-left</code> or <code>.fixed-right</code>
where needed.</p>
<p>Click buttons below, and appropriate class will be added to example navbar.</p>
<div class="btn-group" role="group">
<button type="button" data-class="fixed-left" class="btn btn-primary">
<i class="fa fa-arrow-left"></i>
Fixed Left
</button>
<button type="button" data-class="fixed-top" class="btn btn-primary">
<i class="fa fa-arrow-up"></i>
Fixed Top
<small>(original)</small>
</button>
<button type="button" data-class="fixed-right" class="btn btn-primary">
<i class="fa fa-arrow-right"></i>
Fixed Right
</button>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="form-group">
<label>
Select another bootstrap theme from
Bootswatch
</label>
<select class="form-control width-md" id="theme_select" onchange="selectTheme(value)"></select>
</div>
</div>
</div>
</div>
As you can see I setted 1280px in the media queries, but for some reason the navbar instead of collapse, is displayed as topbar, what I did wrong?

Answer 1

Bootstrap's closest breakpoint is at 1200px. I'd recommend sticking to it, because that way you avoid excessive layout changes. If you're willing to move your breakpoints to #media 1200px to match Bootstrap, you can simply change your class .navbar-expand-md to .navbar-expand-xl, and that's it.
Codepen: https://codepen.io/Terrafire123/pen/NWRKdKR
Edit:
If all you want to do is simply prevent the sidebar from overlapping the body, you can add this:
#media (min-width: 1200px) {
body {
margin-left: 232px !important;
}
}
(This already exists in your original code, but without !important, it's getting overwritten to margin:0; by Bootstrap's default settings.)