Fixed navbar with sidebar position when window resizes

Question

I am currently developing a webpage with navbar and sidebars. My navbar contains the categories of my page which are cars and motorcycle. Upon click, the sidebar will display which will contain the library and reference of the chosen categories. However, whenever the window resizes, my page loses its format. The sidebar is fixed but it can scrollable and it looks like it gets disconnected with the navbar. How to make their positions fixed?

.navbar-inverse {
  background: black;
  font-size: 18px;
}

.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
  color: #ffb143;
}

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: white;
  font-size: 18px;
}

.navbar-brand {
  font-family: 'Lato', sans-serif;
  color: grey;
  font-size: 20px !important;
  margin: 0px;
}

td {
  font-weight: normal;
  padding-left: 55px;
  padding-right: 10px;
  padding-bottom: 18px;
  text-align: center;
}

th {
  font-weight: bold;
  padding-left: 65px;
  padding-right: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}

table#bod {
  width: 100%;
  margin-left: 15px;
  margin-right: 45%;
}

#add {
  margin-left: 10px;
  width: 50px;
}

.sidebar {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: black;
  overflow-x: hidden;
  padding-top: 80px;
  margin-top: 45px;
}


/* Style sidebar links */

.sidebar a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 18px;
  color: white;
  display: block;
}


/* Style links on mouse-over */

.sidebar a:hover {
  color: #f1f1f1;
}


/* Style the main content */

.main {
  margin-left: 160px;
  /* Same as the width of the sidenav */
  padding: 0px 10px;
}


/* Add media queries for small screens (when the height of the screen is less than 450px, add a smaller padding and font-size) */

@media screen and (max-height: 450px) {
  .sidebar {
    padding-top: 15px;
  }
  .sidebar a {
    font-size: 18px;
  }
}

<nav class="navbar navbar-inverse" nav id="nav_bar">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.php"> MRB Data Library </a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#" style=>Cars</a></li>
      <li class="active"><a href="#">||</a></li>
      <li class="active"><a href="#">Motorcycle</a></li>
    </ul>
  </div>

</nav>


<form action="slider_update.php" method="POST">
  <div class="sidebar">
    <center>
      <h2 style="color: white">LIBRARY</h2>
    </center>
    <a href="index.php"><i class="fa fa-fw fa-home"></i> Home</a>
    <a href="#.php"><i class="fa fa-fw fa-folder"></i> Reference</a>
    </nav>
  </div>

Expected output when window resize

My output when window resizes

Answer 1

You can try the same in this way:

https://www.codeply.com/go/7XYosZ7VH5

You can also try using bootstrap 4.

Thanks

Answer 2

if i understood your issue ... then i just reduced the Z-index of the sidebar and set the box-sizing for all elements to border-box also the margins & paddings for body to 0

/* added this */
*{
padding : 0;
margin : 0;
box-sizing : border-box;
}
.navbar-inverse {
  background: black;
  font-size: 18px;
}

.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
  color: #ffb143;
}

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: white;
  font-size: 18px;
}

.navbar-brand {
  font-family: 'Lato', sans-serif;
  color: grey;
  font-size: 20px !important;
  margin: 0px;
}

td {
  font-weight: normal;
  padding-left: 55px;
  padding-right: 10px;
  padding-bottom: 18px;
  text-align: center;
}

th {
  font-weight: bold;
  padding-left: 65px;
  padding-right: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}

table#bod {
  width: 100%;
  margin-left: 15px;
  margin-right: 45%;
}

#add {
  margin-left: 10px;
  width: 50px;
}

.sidebar {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  background-color: black;
  overflow-x: hidden;
  padding-top: 80px;
  margin-top: 45px;
}


/* Style sidebar links */

.sidebar a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 18px;
  color: white;
  display: block;
}


/* Style links on mouse-over */

.sidebar a:hover {
  color: #f1f1f1;
}


/* Style the main content */

.main {
  margin-left: 160px;
  /* Same as the width of the sidenav */
  padding: 0px 10px;
}


/* Add media queries for small screens (when the height of the screen is less than 450px, add a smaller padding and font-size) */

@media screen and (max-height: 450px) {
  .sidebar {
    padding-top: 15px;
  }
  .sidebar a {
    font-size: 18px;
  }
}

<nav class="navbar navbar-inverse" nav id="nav_bar">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.php"> MRB Data Library </a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#" style=>Cars</a></li>
      <li class="active"><a href="#">||</a></li>
      <li class="active"><a href="#">Motorcycle</a></li>
    </ul>
  </div>

</nav>


<form action="slider_update.php" method="POST">
  <div class="sidebar">
    <center>
      <h2 style="color: white">LIBRARY</h2>
    </center>
    <a href="index.php"><i class="fa fa-fw fa-home"></i> Home</a>
    <a href="#.php"><i class="fa fa-fw fa-folder"></i> Reference</a>
    </nav>
  </div>