Sticky (Fixed) SideNav Layout with CSS

by Soh Tanaka

on August 3, 2009

in Tutorials

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.

Fixed SideNav with CSS

The Base Wireframe – HTML/CSS

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

Fixed SideNav with CSS

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.

Building the SideNav – HTML/CSS

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

HTML

Categories

Other Sites

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

Opto tego, distineo luptatum

Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero.

CSS

#content h1 {
background: url(h1_home.gif) no-repeat center top; /*--Background image of heading--*/
text-indent: -9999px; /*--Push text off of page--*/
height: 145px;
margin: 0 0 0 -20px; /*--Since the #content has a padding of 20px, we will push this to the left -20px so it can align--*/
padding: 0;
}
#content h2 {
color: #7f0708;
margin: 10px 0; padding: 10px 0;
font-size: 2em;
font-weight: normal;
}
#content p {
line-height: 1.8em;
padding: 7px 0;
margin: 7px 0;
}

Potential Accessibility Work Around

One potential accessibility issue of having a fixed sidenav is when the sidenav is taller than the user’s viewport. As you can see in this example, the fixed positioning allows the sidenav to go past the viewport, not allowing the user to view the entire navigation. We will be using a few lines of jQuery to move around this issue.

Do keep in mind, that if you plan on having a meaty sidenav, it may be wise to re-think using this fixed sidenav method. From my experience I feel the best fit scenario is usually a sidenav that is short and simple (Not recommended for a giant sidenav).

jQuery Fix

For those who are not familiar with jQuery, do check out their site first and get an overview of how it works. I’ve shared a few tricks that I have picked up along the way, you can check those out as well.

Initial Step – Call the jQuery file
You can choose to download the file from the jQuery site, or you can use this one hosted on Google.



The following script contains comments explaining which jQuery actions are being performed.

$(document).ready(function() {

function staticNav() {
var sidenavHeight = $("#sidenav").height(); //Get height of sidenav
var winHeight = $(window).height(); //Get height of viewport
var browserIE6 = (navigator.userAgent.indexOf("MSIE 6")>=0) ? true : false; //Check for IE6

if (browserIE6) { //if IE6...
$("#sidenav").css({'position' : 'absolute'}); //reset the sidenav to be absolute
} else { //if not IE6...
$("#sidenav").css({'position' : 'fixed'}); //reset the sidenav to be fixed
}

if (sidenavHeight > winHeight) { //If sidenav is taller than viewport...
$("#sidenav").css({'position' : 'static'}); //switch the fixed positioning to static. Say good bye to sticky nav!
}
}

staticNav(); //Execute function on load

$(window).resize(function () { //Each time the viewport is adjusted/resized, execute the function
staticNav();
});

});

Fixed SideNav with CSS

Conclusion

Nice and simple! If you have any questions, concerns, or suggestions, please do not hesitate to let me know.

About the Author:

Soh Tanaka is a Los Angeles based Web Designer and blogger, who recently launched a CSS Web Gallery called Design Bombs. For more front-end web development tutorials, check out his web design blog or you can follow him on twitter @SohTanaka

Powered by Shutterstock

About Soh Tanaka

Soh Tanaka is a Los Angeles based Web Designer and blogger, who recently launched a CSS Web Gallery called Design Bombs. For more front-end web development tutorials, check out his web design blog or you can follow him on twitter @SohTanaka