htmlcsssidebarskeleton-css-boilerplate

How to create fixed sidebar with Skeleton CSS?

This question was asked about a few years ago with no acceptable answers. I would like to know if things have changed and it is now possible to use Skeleton CSS with a fixed, responsive sidebar. Preferably without the need for Javascript.

My HTML is as follows:

<html>
  <head>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/skeleton.css">
    <link rel="stylesheet" href="css/custom.css">
  </head>
  <body class="container">
    <div class="row">
      <section class="three columns">
        <nav id="sidebar">
          sidebar content ...
        </nav>
        &nbsp;
      </section>
      <section id="content" class="nine columns">
        body content ...
      </section>
    </div>
  </body>
</html>

I've tried a few different ways in CSS to make the sidebar fixed (doesn't scroll), but keeping the layout responsive to size changes. The simplest is the following in custom.css:

#sidebar {
  position: fixed;
}

This looks right until the page becomes too narrow, and then the sidebar and body content overlap although what they should do instead is the sidebar would be above the body content.

Here is a jsfiddle page that one can play with for this problem.

How do I create a proper, fixed sidebar with Skeleton CSS that behaves properly to window size changes?

Solution

  • You may use "media query to change the behavior of the CSS when display is less then 480 in it's width:

    @media screen and (max-width: 480px) {
    #sidebar{
        position: relative;
    }
}

#sidebar{
  position: fixed;
}

    Using it this way, it will be relative to whatever if width is less then 480px, or fixed on higher resolution.