CSS/Bootstrap – sidebar on site changes to navbar on mobile

  bootstrap-4, css, laravel

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.

Source: Laravel

Leave a Reply