Unable to make left sidebar fixed

Question

I have a left div with id sideNav and a right main div like this

#sideNav {
  background-color: #012d20;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow: hidden;
  border-right-style: groove;
  height: 100vh;
}

<div class="row">
  <!-- navigation sidebar -->
  <div class="col-2 pt-5" id="sideNav">
    ...
  </div>

  <!-- main content area -->
  <main class="col-10">
    ...
  </main>
</div>

The code works but the left part of main is now inside behind the sideNav. When I remove the position property of the sideNav css, my divs are displayed correctly again but sideNav is no longer fixed and scrolls with the page.

How do I keep sideNav fixed and my divs properly displayed?

Yeah that would work but that means I will also have to write a different css rule for various screen sizes. Isn't there a way to make it work without writing multiple rules? — Mena, Mar 13 '19 at 10:30
You don't really need to position absolute if you're going to make the first div's height 100vh. Just put both divs as float: left; — Ari, Mar 13 '19 at 10:32

cmprogram · Accepted Answer · 2019-03-13T10:39:34.533

The reason this isn't working for you, is because row has display type flex, so that all the cols below fit into that row.

Your cols are then blocks spaced via their given value e.g. col-3 col-4 etc

By changing the column display type (to fixed in your example) your removing it from the flex spacing, and so your main nav will move left because you haven't offset it.

To fix this, don't add padding as others have suggested, BootStrap has classes that handle this. Instead, add offset-2 to your main nav, and leave everything else as is.

Example Snippet

#sideNav {
  background-color: #012d20;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow: hidden;
  border-right-style: groove;
  height: 100vh;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row">
  <!-- navigation sidebar -->
  <div class="col-2 pt-5" id="sideNav">
    ...
  </div>

  <!-- main content area -->
  <main class="col-10 offset-2">
    ...
  </main>
</div>

Great, using bootstrap offset did it. – Mena Mar 13 '19 at 10:42 — Mena, Mar 13 '19 at 10:42

score 0 · Answer 2 · answered Mar 13 '19 at 10:31

Thats because fixed gets "ignored" by other containers. It is handelt as if it was absolute. You can give your sidebar a fixed width and your main a padding.

#sideNav {
  background-color: #012d20;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow: hidden;
  border-right-style: groove;
  height: 100vh;
  width: 350px;
}

main {
  padding-left: 350px;
}

Codepen

score 0 · Answer 3 · answered Mar 13 '19 at 10:48

Lets try this,

iam adding width for sideNav about 40px;the same padding-left iam put #main-content.

html

          <div class="row">
            <!-- navigation sidebar -->
            <div class="col-2 pt-5" id="sideNav">
            <p>paragraph...</p>
           </div>
           <!-- main content area -->
           <main class="col-10" id="main-content">
             <p>paragraph...</p>
             <p>paragraph...</p>
           </main>
           </div>

css

        #sideNav {
            background-color: #012d20;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            overflow: hidden;
            border-right-style: groove;
            height: 100%;
            width:40px;
         }

         #main-content{
          width:100%;
          float:left;
          padding:0 0 0 40px;
          background:yellow;
         }

score 0 · Answer 4 · answered Mar 13 '19 at 11:12

I saw you are using bootstrap grid, so to keep the grid working I recommend putting your fixed container in the .col-2 div

 #sideNav {
      background-color: #012d20;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      overflow: hidden;
      border-right-style: groove;
      height: 100vh;
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="row">
      <!-- navigation sidebar -->
      <div class="col-2 pt-5">
        <div id="sideNav">
          ...
        </div>
      </div>

      <!-- main content area -->
      <main class="col-10">
        ...
      </main>
    </div>

Unable to make left sidebar fixed

4 Answers4