Unable to make left sidebar fixed [duplicate] - html

Question

This question already has answers here:
How to create a fixed sidebar layout with Bootstrap 4?
(5 answers)
Closed 3 years ago.
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?

Answer 1

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>

Answer 2

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

Answer 3

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;
}

Answer 4

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>