CSS/Bootstrap - sidebar on site changes to navbar on mobile - css

Question

I've got problem with self-created sidebar in admin panel. It works fine on desktop, but I want that in mobile it should change position to top.
At this moment it looks like this:
LINK
<div class="col-3" id="sticky-sidebar">
<div class="sticky-top">
<div class="card-body" align="center">
<h4>Admin Panel</h4>
<div class="nav flex-column" align="center">
<div class="sidebar-menu-header">
<h5>Site</h5>
</div>
<button class="btn btn-outline-dark nav-link btn-admin active">Statystyki cmentarza</button>
<button class="btn btn-outline-light nav-link btn-admin dropdown-btn" data-toggle="dropdown">Osoby pochowane</button>
<div class="dropdown-container">
<a class="nav-link" href="#">Ewidencja osób</a>
<a class="nav-link" href="#">Dodaj zmarłego</a>
</div>
</div>
</div>
</div>
</div>
I use class - sticky-top to get it on site. I know that if I use something like this:
#media(max-width: 650px){
#sticky-sidebar{display: none;}
}
It should hide it. Eitherway I wanted to move it when it's on small screen to top of the site under the navbar.

Answer 1

It works and hide it, you can create a new navbar who displays only under 650px
#my-new-navbar {
display: block;
}
#media screen and (min-width: 650px){
#my-new-navbar{display: none;}
}
or you can use col-md-3, by default your navbar takes 100% width.
<div class="col-md-3" id="sticky-sidebar">
...
</div>