How to Implement Fixed Sidebar Correctly

How to implement fixed sidebar correctly?

Use the content div as your container for the page.

 .sidebar {
     position: fixed;
     width: 200px;
     height: 400px;
     background: #000;
 }
 .content {
     margin-left: 200px;
     height: 500px;
     width: auto;
     position: relative;
     background: #f00;
     overflow: auto;
     z-index: 1;
 }
 .info {
     width: 1440px;
     height: 300px;
     position: relative;
     background: #f55;
 }

<div class="sidebar"></div>
<div class="content">
    <div class="info"></div>
</div>

Your content will need to be the container to put the page in. The values here are my test to see if I am correct in this. If your width and height exceeds the values you set for content, the scroll bars will appear.

Have a fiddle: http://jsfiddle.net/djwave28/JZ52u/

---

edit: responsive sidebar

To have a responsive fixed sidebar, simply add a media-query.

Example:

@media (min-width:600px) {
   .sidebar {
     width: 250px;
   }
   .content {
     margin-left: 250px;
   }
 }

Here's another fiddle: http://jsfiddle.net/djwave28/JZ52u/363/

Fixed sidebar, content under it, how to fix?

A fixed positioned div will be fixed on the page, even if you scroll it. And all the stuff goes under it (it has z-index priority).

To fix it, give your content div left padding equal to the width of your sidebar.

.barralado {
    position: fixed;
    top: 0;
    left: 0;
    min-height: 300px; // I suggest you give a value to your sidebar. 
    width:300px; //This is your width;
}

.contneudo{
    padding-left:300px; //This is the padding that will go around your sidebar
}

Keep sidebar fixed on top while content scrolls

Try making the position of the sidebar "fixed" while stating its exact position. So you would add the following to the div class "sidebar" in your CSS:

position: fixed;
left: 1110px;
top: 30px;

You can adjust the top and left positions to make everything fit to your likings, but this should roughly put the sidebar in the correct position. :)

How to create a fixed sidebar layout with Bootstrap 4?

Updated 2020

Here's an updated answer for the latest Bootstrap 4.0.0. This version has classes that will help you create a sticky or fixed sidebar without the extra CSS....

Use sticky-top:

<div class="container">
    <div class="row py-3">
        <div class="col-3 order-2" id="sticky-sidebar">
            <div class="sticky-top">
                ...
            </div>
        </div>
        <div class="col" id="main">
            <h1>Main Area</h1>
            ...   
        </div>
    </div>
</div>

Demo: https://codeply.com/go/O9GMYBer4l

or, use position-fixed:

<div class="container-fluid">
    <div class="row">
        <div class="col-3 px-1 bg-dark position-fixed" id="sticky-sidebar">
            ...
        </div>
        <div class="col offset-3" id="main">
            <h1>Main Area</h1>
            ...
        </div>
    </div>
</div>

Demo: https://codeply.com/p/0Co95QlZsH

Also see:
Fixed and scrollable column in Bootstrap 4 flexbox

Bootstrap col fixed position

How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

Create a responsive navbar sidebar "drawer" in Bootstrap 4?

Unable to make left sidebar fixed

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>

Fixed sidebar with one overflowing content and one fixed content

This should help you get started.

UPDATED

* {  margin: 0;  padding: 0;  box-sizing: border-box;}
body {  display: flex;  height: 100vh;  overflow: hidden;}
aside,main {  /*   height: 100%; */  /*   width: 100%; */}
aside {  flex-grow: 1;  background: #eee;  padding: 5px;}
main {  flex-grow: 6;  background: #ddd;  padding: 20px;  height: 100vh;  overflow-y: scroll;}
.wrapper {  display: flex;  height: 100vh;  justify-content: space-between;  flex-direction: column;}
.btn {  margin: 20px auto;  background: #bada55;  padding: 20px;}

<aside>  <div class="wrapper">    <nav>      <ul>        <li>Item menu</li>        <li>Item menu</li>        <li>Item menu n</li>      </ul>    </nav>    <a class="btn">button  </a>  </div>
</aside><main>  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum    dolor sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor    sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet,    consectetur adipisicing elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur    adipisicing elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing    elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit.    Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque    ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati    eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati eveniet    distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati eveniet distinctio    provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.</p></main>

How to get a fixed sidebar to display nicely when viewed from a smartphone

You can use media queries for that.

A media query consists of a media type and zero or more expressions
that check for the conditions of particular media features.

This media query expresses that the style sheet is usable on devices with viewport (the part of the screen/paper where the document is rendered) widths between 400 and 700 pixels:

@media screen and (min-width: 400px) and (max-width: 700px) { … }

source: http://www.w3.org/TR/css3-mediaqueries/

---

Related Topics