70

I'd like to create a fixed sidebar that exists outside my centered Bootstrap Grid. The challenge I face when attempting to do this is determining what additional styles to apply/overwrite to my .container so that it doesn't overlap my sidebar when the screen is resized.

For starters I'm only using the grid portion of the css framework so the .container, .row and .col-md-12 is code pulled from the bootstrap.css file itself and is not custom. Also keep in mind I'm using Bootstrap 3, so please, no suggestions for a fluid grid solution for Bootstrap 2 that is often asked about in previous threads.

HTML

<div id="left-nav"></div>
<div class="container">
   <div class="row">
      <div class="col-md-12">
         <p>Lorem ipsum dolor sit amet, nunc dictum at.</p>
      </div>
   </div>
</div>

CSS

html, body {
  height: 100%;
  width: 100%;
}
#left-nav {
  background: #2b2b2b;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 250px;
}
5

1 Answer 1

114

As drew_w said, you can find a good example here.

HTML

<div id="wrapper">
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand"><a href="#">Home</a></li>
            <li><a href="#">Another link</a></li>
            <li><a href="#">Next link</a></li>
            <li><a href="#">Last link</a></li>
        </ul>
    </div>
    <div id="page-content-wrapper">
        <div class="page-content">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <!-- content of page -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

#wrapper {
  padding-left: 250px;
  transition: all 0.4s ease 0s;
}

#sidebar-wrapper {
  margin-left: -250px;
  left: 250px;
  width: 250px;
  background: #CCC;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  z-index: 1000;
  transition: all 0.4s ease 0s;
}

#page-content-wrapper {
  width: 100%;
}

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width:767px) {

    #wrapper {
      padding-left: 0;
    }

    #sidebar-wrapper {
      left: 0;
    }

    #wrapper.active {
      position: relative;
      left: 250px;
    }

    #wrapper.active #sidebar-wrapper {
      left: 250px;
      width: 250px;
      transition: all 0.4s ease 0s;
    }

}

JSFIDDLE

7
  • How would one change the code to make it stick to the right instead?
    – masb
    Commented Aug 18, 2014 at 8:12
  • 2
    @masb I would suggest trying to change all the references of padding-left, margin-left and left, to padding-right, margin-right and right respectively
    – eggy
    Commented Aug 18, 2014 at 12:50
  • 1
    What I really like about this is it isn't bloated with markup and css. So I can easily review the code and understand it and then make any necessary changes.
    – Donato
    Commented Mar 26, 2015 at 18:15
  • 2
    This is great! The only tweak I'd like to see is have a full-width navbar at the top. Then the sidebar would only start BELOW the top navbar...
    – ganders
    Commented Feb 23, 2016 at 18:30
  • 7
    This is not a good solution, container has widths in pixels and by shifting it through the left-padding that means you will get scrollbars when resizing.
    – Mina Luke
    Commented Sep 2, 2016 at 2:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.