Fixed sidebar with Skeleton responsive layout

Question

I have a simple two column responsive design with Skeleton boilerplate. For the sidebar I have this div, inside a container div:

 <div class="container">
    <div class="four columns">
       /* logo and menu */
    </div>
    <div class="nine columns post">
       /* contents... */
    </div>
 </div>

I like the way it looks in wide viewports and how it's stacked on narrower ones, but I'd like to have the sidebar (four columns div) in the wider sizes always fixed at the left, while scrolling the content of the other div.

Tried several things but it ends screwing up the responsive layout, I guess I don't have a thorough knowledge of CSS positioning...

Any help is appreciated! Thanks.

Answer 1

I read that you are using the Skeleton Boilerplate.

I recommend that you put your logo and menu in a <nav>element. When closing </nav>, insert a non-breaking space ( ). This non-breaking space will hopefully fix your problem!

 <div class="container">
    <div class="four columns">
       <nav>
       /* logo and menu */
       </nav>
       &nbsp;
    </div>
    <div class="nine columns post">
    /* contents... */
    </div>

The next thing to do is to go to your CSS file and insert:

nav{ position:fixed; width:220px; /*found the width-info on Skeleton website*/ }

Let me know if it worked out for you!

Answer 2

For that you need to have a "sticky" div

Try using waypoints