How to fix navbar and sidebar to stick together when scrolling down, HTML & CSS

Question

I am having a problem whenever I scroll my page or content, the Sidebar is being scrolled down as well which leaves the navbar at the top and produce a gap in between. Here is the picture of the problem.

How to fix this UI problem. As you can see there's a gap in between, and if I scroll it down, the gap becomes larger.

 .sidebar { margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; }.sidebar a { display: block; color: black; padding: 16px; text-decoration: none; }.sidebar a.active { background-color: #04AA6D; color: white; }.sidebar a:hover:not(.active) { background-color: #555; color: white; } div.content { margin-left: 200px; padding: 1px 16px; height: 1000px; } @media screen and (max-width: 700px) {.sidebar { width: 100%; height: auto; position: relative; }.sidebar a {float: left;} div.content {margin-left: 0;} } @media screen and (max-width: 400px) {.sidebar a { text-align: center; float: none; } }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <?-- Navbar --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">App</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Login</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Register</a> </li> </ul> </div> </nav> <;-- End --> <?-- sIDEBAR --> <div class="sidebar"> <a class="active" href="<?php echo base_url(); ?>">Dashboard</a> <a class="" href="<?php echo base_url(); ?>">Bookes</a> <a class="" href="<?php echo base_url(); ?>">Clothes</a> <a class="" href="<?php echo base_url(); ?>">Electronics</a> </div> <div class="content">

Answer 1

 body {margin:0;} /*Sidebar*/.sidebar { margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; position: fixed; top:80px; height: 100%; overflow: auto; } /*Navbar*/.navbar { position:fixed; top:0; left:0; height:80px; width:100%; background:red; } /*Main content*/ main {margin-top:120px; margin-left:240px;}

 <?-- Navbar --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">App</a> </nav> <;-- End --> <main> <p>text text text</p> <p>text text text</p> <p>text text text</p> <p>text text text</p> <p>text text text</p> <p>text text text</p> <p>text text text</p> <p>text text text</p> <p>text text text</p> <p>text text text</p> <p>text text text</p> <p>text text text</p> <p>text text text</p> <p>text text text</p> <p>text text text</p> <p>text text text</p> </main> <?-- sIDEBAR --> <div class="sidebar"> <a class="active" href="<?php echo base_url(); ?>">Dashboard</a> <a>1</a> <a>2</a> <a >3</a> <a>4</a> </div> <div class="content">

Both your navbar and sidebar need to be position: fixed . That way they wont be affected by the scroll.

Answer 2

I know its bit late, but still to help community.

Code:

<aside class="left-sidebar">
  <div class="sidebar">
    <nav >
    <span class="divider"></span>
     <a class="active" href="<?php echo base_url(); ?>">Dashboard</a>

     <a class="" href="<?php echo base_url(); ?>">Bookes</a>
       .
       .
    </nav>
  <div>
</aside>

CSS:

.left-sidebar {
    position: relative;
    width: 240px;
    height: 100%;
    background-color: $darkBlue;
    background: linear-gradient(180deg, #0072C0 15%, $darkBlue 100%);
    box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
}       
.divider{
     display: block;
     border-bottom: 1px solid rgba(255,255,255,0.10);
     width: 170px;
     margin: 0 auto;
   }

Answer 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sidebar {
  margin: 0;
  padding: 0;
  width: 201px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}
 
.sidebar a.active {
  background-color: #04AA6D;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 999px;
}

@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {float: left;}
  div.content {margin-left: 0;}
}

@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}
    </style>
</head>
<body>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Navbar -->

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">App</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">

    <ul class="navbar-nav  mr-auto">

      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>

    </ul>

    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Login</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
        </li>
    </ul>

  </div>
</nav>

<br><br>
<div class="sidebar">
 <a class="active" href="<?php echo base_url(); ?>">Dashboard</a>

  <a class="" href="<?php echo base_url(); ?>">Bookes</a>
   <a class="" href="<?php echo base_url(); ?>">Clothes</a>
    <a class="" href="<?php echo base_url(); ?>">Electronics</a>

    


</div>

<div class="content">
</body>
</html>