Make a fixed navbar and sidebar in bootstrap 4?

Question

I'm using HTML, Javascript, Bootstrap, and CSS to create a navbar and sidebar for our system. I just want to make the navbar and sidebar fixed even the user scroll down the page. And also responsive. How can I do that without changing the design of the navbar and sidebar? Can somebody help me with my problem using bootstrap? Here's my jsfiddle https://jsfiddle.net/exyvat08/17/

Original Design

The problem when I put the fixed-top and custom CSS

<div class="d-flex" id="wrapper">
  <div class="bg-light border-right" id="sidebar-wrapper">
    <div class="sidebar-heading"><a href="#" class="navbar-left text-dark"><img class="mx-auto d-block" src="../images/logo.jpg" id="logo"></a></div>

    <div class="list-group list-group-flush">
    <a href="<?php echo url_for('admin/index.php')?>" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold"><i class="fas fa-tachometer-alt"></i>Dashboard</a>

    <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">User</a>

    <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Supplier</a>

    <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Purchase Order</a>

    <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Reports</a>

    </div>
  </div>
  <!-- /#sidebar-wrapper -->

  <!-- Page Content -->
  <div id="page-content-wrapper">

  <nav class="navbar navbar-expand-lg navbar-light bg-success border-bottom">
    <button class="btn btn-outline-light btn-sm" id="menu-toggle">Hide Menu</button>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
        <li class="nav-item active">
          <a class="nav-link text-light" href=""><i class="fas fa-home"></i> Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-light"><i class="fas fa-building"></i> Contact</a>
        </li>
        <li class="nav-item dropdown">
          <a class="btn nav-link dropdown-toggle text-light" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user"></i> John Doe
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">See Profile</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Logout</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>

Answer 1

Using fixed-top bootstrap class and custom css

 $("#menu-toggle").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("toggled"); if (e.target.innerText == "Show Menu") { e.target.innerText = "Hide Menu"; } else { e.target.innerText = "Show Menu"; } }); 

 body { height: 100%; overflow-x: hidden; font-family: sans-serif; } #logo { width: 160px; height: 150px; border-radius: 50%; } #sidebar-wrapper { min-height: 100vh; margin-left: -15rem; -webkit-transition: margin .25s ease-out; -moz-transition: margin .25s ease-out; -o-transition: margin .25s ease-out; transition: margin .25s ease-out; } #sidebar-wrapper .sidebar-heading { padding: 0.875rem 1.25rem; font-size: 1.2rem; } #sidebar-wrapper .list-group { width: 15rem; } #page-content-wrapper { min-width: 100vw; } #wrapper.toggled #sidebar-wrapper { margin-left: 0; } .navbar { background: linear-gradient(to top right, #0084ff, #0084ff); /*position: fixed;*/ } @media (min-width: 768px) { #sidebar-wrapper { margin-left: 0; } #page-content-wrapper { min-width: 0; width: 100%; } #wrapper.toggled #sidebar-wrapper { margin-left: -15rem; } } #sidebar-wrapper { position: fixed; } #page-content-wrapper { padding-top: 57px; } #page-content-wrapper, #page-content-wrapper>.navbar { -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; } #wrapper.toggled #page-content-wrapper>.navbar { left: 15rem; } #wrapper.toggled #page-content-wrapper { margin-left: 15rem; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <div class="d-flex" id="wrapper"> <div class="bg-light border-right" id="sidebar-wrapper"> <div class="sidebar-heading"> <a href="#" class="navbar-left text-dark"><img class="mx-auto d-block" src="../images/logo.jpg" id="logo"></a> </div> <div class="list-group list-group-flush"> <a href="<?php echo url_for('admin/index.php')?>" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold"><i class="fas fa-tachometer-alt"></i>Dashboard</a> <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">User</a> <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Supplier</a> <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Purchase Order</a> <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Reports</a> </div> </div> <!-- /#sidebar-wrapper --> <!-- Page Content --> <div id="page-content-wrapper"> <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-success border-bottom"> <button class="btn btn-outline-light btn-sm" id="menu-toggle">Hide Menu</button> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link text-light" href=""><i class="fas fa-home"></i> Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link text-light"><i class="fas fa-building"></i> Contact</a> </li> <li class="nav-item dropdown"> <a class="btn nav-link dropdown-toggle text-light" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user"></i> John Doe </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">See Profile</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Logout</a> </div> </li> </ul> </div> </nav> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div>