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.

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


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


.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.



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.

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.


#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


Fixed SideNav with CSS


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

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
  1. August 3, 2009

    Very nice tutorial Soh, I like the demo!

  2. August 4, 2009

    Great tutorial. Good demo and explanation.

  3. August 4, 2009

    Gah! Expressions, UA sniffing! Please if you need to target IE utilise conditional comments.

    I think we are safely at a stage where awful hacks to make it work in IE6 are not really needed, progressive enhancement. Let’s leave IE6 in the dust where it belongs.

  4. Pingback: Sticky (Fixed) SideNav Layout with CSS « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit

  5. August 4, 2009

    really great effort. thanks

  6. August 4, 2009

    Waho… Great tutorial !
    Your demo page is very nice !
    Thanks for sharing

  7. Jim
    August 4, 2009

    It appears that the Firefox 3.5.2 update that came through tonight broke the demo. I saw it work earlier, though, and I was very impressed. Hopefully the fix is a simple one.

  8. August 4, 2009

    wow! very nice. thanks for the tut

  9. August 4, 2009

    It’s really great article. Love the demo and explanation. And very helpfull for us.

  10. Pingback: 25 fresh links for my friends and tweeps :) « Adrian Zyzik’s Weblog

  11. August 4, 2009

    pretty sample. but the IE6 fix suck πŸ™‚

  12. August 4, 2009

    Really Nice Technique!

    This will also be really useful in web application interfaces.


  13. Pingback: 25 fresh links for my friends and tweeps :) | iphone sat extreme blog

  14. August 4, 2009

    this looks very neat

  15. Pingback: Links creativos para 03.08/04.08 |

  16. August 4, 2009

    Very interesting, great tutorial.

  17. Diane
    August 4, 2009

    Nice idea, well done article, except for the use of the expressions. Expressions have a very nasty habit if chewing up a pc’s resources in record time until there’s nothing left as the browser continuously executes those expressions.

    I agree that conditional comments should be used to target IE6. I’d love to leave it in the dust, but I can’t. I work for one of those companies that won’t upgrade IE due to legacy programs that were written to only work with THAT browser – and many in the corporate world are similarly stuck.

  18. Pingback: Sticky (Fixed) SideNav Layout with CSS | Gery's Blog

  19. Pingback: Sticky (Fixed) SideNav Layout with CSS | Design Newz

  20. Pingback: out of repose: Web Dev Roundup

  21. Pingback: Sticky (Fixed) SideNav Layout with CSS « Lab of Chowky

  22. ah_fui
    August 5, 2009

    coolio….. appreciate your effort.

  23. August 6, 2009

    I have seen this on a number of website recently and have been wondering what would be the best way to recreate it, thanks for helping me out.

  24. August 7, 2009

    Thank you all for the feedback!

    If anyone has questions feel free to just let me know~ πŸ™‚

  25. August 7, 2009

    Great tutorial – many thanks for sharing!

  26. vsync
    August 11, 2009

    basically IE expression should never be used, is sake of performances.

    I’ve wrote a jQuery plugin for dealing with floating
    menues and such, its cross-platform and
    also highly flexable with project demands.

    check it out:


  27. August 12, 2009

    @vsync – I did something similar on my site: – but haven’t constrained the navas it’s not necessary.

    My contact details and Twitter posts also flow with the page however, and I’ve notice that, on longer posts in IE, they can sometimes ‘break out’ of the container. I’ll be having a look at your solution to see if it could help, so thanks.

    Great article by the way!

  28. vsync
    August 12, 2009

    @John Goodwin – its not just on IE, but your right side breaks on Firefox also.. when I scroll all the way down.

    you have a well-known bug.
    try to scroll all the way down, then resize your window height to a smaller one, and then scroll down even more.
    it gets into infinite scroll-down.

    my plugin is built for high performance, and should solve your problems.

  29. Pingback: #WDNDL For 8/13/2009 – Web Inspirations, CSS & jQuery Tutorials! « CodeEdoc – Technology And Programming News

  30. August 16, 2009

    Would have been nicer to keep that top red bar position:fixed too?

  31. August 21, 2009

    Thank you very much! Good tutorial.

    Best Regards

  32. August 24, 2009

    I’m going to add this to me site, as i feel the scrolling will become rather large on my blog section.

    Don’t need the jQuery script though, as my navigation is at the top. πŸ˜›

    Great work.

  33. adrian
    August 31, 2009

    wow great tutorial
    helped me a lot

  34. Pingback: MyInkTrail: Best of the Design Community, August 2009

  35. Pingback: Really Useful Tutorials You Should Have Read in August 2009 |

  36. Pingback: MyInkTrail: Best of the Design Community, August 2009 | Psychokiller

  37. landscribe
    September 8, 2009

    You can’t scroll to the bottom of the left hand nav if your screen/browser window is shorter than the length of the nav. Annoying. In FF3.5.2 anyway.

  38. Pingback: MyInkTrail: Best of the Design Community, August 2009 - Programming Blog

  39. Ruana
    November 13, 2009


    I tried to incorporate the menu into one of my websites but it didn”t work in IE7. Some time ago I faced a similar problem when I followed another tutorial on how to code a sticky footer.
    Whatever the reason may be…. YOUR demo page AND MY website both don’t work.

    Can anyone help please?

  40. November 16, 2009

    Is there a possibility to get a “head” fixed?

  41. November 16, 2009

    Yes, it’s possible. Here is one example –

  42. greenvalue
    January 5, 2010

    nice and very useful in general – EXCEPT:
    in your demo the spacing of the list item in the navigation is so generous that on my screen resolution “Folio Focus” is cut off – the items below I can only see once I press F11 for full screen view (which average user knows about that function?).
    That won’t do! Why? Because with this “nice layout” I cannot scroll down to the last navigation links. [Stupid – ain’t it]
    I’m using an ASUS notebook from 2007, set to its maximum resolution; it would be cut off even more on my netbook’s screen.

  43. January 12, 2010

    this is really helpful,you gave me something to play with ,thnx

  44. January 12, 2010

    Great post but why does the menu have a h2 at the begining, for semantic reasons shouldnt headings etc be exclusively for the content panel. also for SEO reasons its best to not use heirarchy for side content (it usually messes us the h1 -> h5 flow of headings as theres always some joker who has a h2 or less higher in the code which again doesnt make semantic sense.

  45. ekly
    January 13, 2010

    If you resize your browser window, the sidebar doesn’t stick anymore, even if you put it back to full size. Am I the only one experiencing that?

    FF 3.5.8
    Opera 10.10 on linux

  46. January 13, 2010

    It stays sticky for me when the browser (Firefox) is re-sized and after it’s back to the original size.

  47. LX
    January 29, 2010

    The CSS expressions are not really good. Use JS and the onscroll/onresize Events if you really need it in IE6 (though it would not hurt not to show this trick in IE6).

    If you have full control over the HTML, you could use layered divs, one of them with overflow: auto, though the sizes are a bit tricky.

    Greetings, LX

  48. February 13, 2010

    Cooooooool Dude

    Worth a 100+ Bucks

    Gret Tut

  49. Johnny
    March 21, 2010

    good example, but it doesn’t work perfectly.

    I mean, if you resize the window manually to a lower size (600px width, for instance) and scroll horizontally, the non-fixed part overlays the fixed part.

    Please fix it πŸ™‚

  50. April 22, 2010

    Nice tutorial I always like the step by step tutorials great share and great stuff thanks

  51. May 24, 2010

    it dont work for me im new to JQuery is there anyway you can do it without Jquery ?? or with javascript or php ?? x

  52. May 24, 2010

    Thats one fine example of what CSS can do ! I am so impressed, I am adding this tutorial to my CSS aggregator site. Hope you dont mind.

  53. hwany
    June 9, 2010

    Wow, never realised that something so cool was so simple =D

  54. July 27, 2010

    YESSS!! Thanks so much for this tutorial. I was trying to avoid the JS and Jquery tidbit for a fixed sidebar and this is perfect πŸ™‚ Definitely retweeting this!

  55. July 27, 2010

    Excellent stuff. Been looking for a clear way to handle this in our app for a while.

  56. Alex Righetto
    August 6, 2010

    I’ve made my own version of this technique, maybe it could be interesting compare whith your.

    here the link:

  57. August 8, 2010

    It looks great! Very useful, Thanks!

  58. August 8, 2010

    never realised that something so cool was so simple =D

  59. August 20, 2010

    nice tutorial

  60. September 27, 2010

    nice tricks. i’ll use it, thank’s.

  61. November 6, 2010

    Making a website with CSS is extremely important if you want a clear and good looking design , and of course a clean coding.

  62. Coltrane
    November 13, 2010

    Good stuff Soh – Any fixes for the firefox bugs yet?

  63. December 26, 2010

    Very nice tutorial …thanks

  64. January 12, 2011

    very very useful.. thnkx

  65. February 3, 2011

    small yet very much effective tutorial .. thanks

  66. March 3, 2011

    Great Tutorial, just what I need for my latest site! I am having issues however when the screen resolution is small enough to allow you to scroll horizontally. The sticky nav overlaps the content to the right of it. Do you know how to stop the sticky nav from moving across horizontally?

  67. March 22, 2011

    nice tutorial but im looking other sticky sidenav.. πŸ™‚

  68. Nils
    April 4, 2011

    Does not work in iPad

  69. April 17, 2011

    Incredible ! Loved the way you treated IE 6.

    Thanks !

  70. June 22, 2011

    I am a newbie to CSS and have tried adding a fixed sidebar which seems to be working ok in Firefox. However, when testing the site in different browser using, in some cases it looks like I have duplicated the sidebar twice?!:

    I have added:

    #wrap {
    position: relative;
    width: 820px;
    margin : 0px auto;
    #secondary {
    position : fixed;
    top : 10px;
    left : 50%;

    padding-left : 110px;

    #content {
    width : 820px;

  71. July 8, 2011

    Great Information!

    We’ve been brushing up on CSS, very timely, indeed.

    Thanks for the post

  72. July 20, 2011

    can someone please help me?
    i don’t know how to get my sidebar fixed..!!
    please please heeelp! πŸ™‚

  73. July 22, 2011

    Well tutorialized !

Leave a Reply

Your email address will not be published. Required fields are marked *

Announcing the Winners from the E-Commerce Week Giveaway