Sticky (Fixed) SideNav Layout with CSS

Today I would like to go over how to create a fixed sidenav layout for your blog or website.

Having a fixed sidenav comes in handy when dealing with blog style websites where the content is extremely tall and there is a need for good amount of scrolling. The fixed navigation allows the user to cruise through the content without scrolling back up to the top to navigate through the rest of the site.

View Demo of Fixed SideNav

The Base Wireframe – HTML/CSS

First center align your the main container, then add the two main sections (the sidenav and the content).

HTML

Fixing the sidenav is quite simple, just add a fixed position to your sidenav, then float your main content to the right.

CSS

.container {
width: 980px;
margin: 0 auto;
overflow: hidden;
background: url(container_stretch.gif);
font-size: 1.2em;
position: relative;
}
#sidenav {
width: 300px;
position: fixed; /*--Fix the sidenav to stay in one spot--*/
float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
}
#content {
float: right; /*--Keeps content to the right side--*/
width: 640px;
padding: 0 20px 20px;
}

Unfortunately the fixed position property is not supported in IE6. There is a workaround I stumbled across here that allowed IE6 to behave.

*html #sidenav {
position: absolute;
left: expression( ( 0 ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) 'px' );
top: expression( ( 0 ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) 'px' );
}

For those who are not very familiar with how fixed positioning works, do check out the resources below.

• w3schools – CSS Positioning
• Absolute, Relative, Fixed Positioning: How Do They Differ?
• Stopping the CSS positioning panic

Building the SideNav – HTML/CSS

Place the logo first, followed by a level 2 heading, then the navigation as an unordered list.

HTML

Categories

• Link
• Link

Other Sites

• Link
• Link

You will notice that the level 2 headings are replaced with a background image. Take a look at the CSS below.

#sidenav h2 {
text-indent: -99999px; /*--Push the text off of the page--*/
height: 41px;
padding: 0; margin: 15px 0 5px;
background-position: 20px top; /*--Set position of each heading background--*/
}
h2.categories {background: url(h2_categories.gif) no-repeat ;} /*--Background image for "category" heading--*/
h2.sites {background: url(h2_othersites.gif) no-repeat ;} /*--Background image for "other sites" heading--*/
#sidenav ul {
margin: 0; padding: 0 20px 30px 20px;
list-style: none;
background: url(sidenav_hr.gif) no-repeat right bottom; /*--thin break line underneath the navigation--*/
}
#sidenav ul li{
margin: 0; padding: 0;
display: inline; /*--Fixes IE6 bug of double margin--*/
}
#sidenav ul li a{
display: block;
margin: 0; padding: 5px 0 5px 15px;
background: url(sidenav_arrow.gif) no-repeat left center;
text-decoration: none;
color: #333;
}
#sidenav ul li a:hover {
color: #999;
}

Building the Main Content – HTML/CSS

This part is pretty simple and self explanatory. To replace the level 1 heading, use the same text replacement technique as the sidenav level 2 heading.
HTML

Articles & Resources for Web Designers