Sticky SideNav Layout with CSS
Tags: Guest Post, Intermediate
I recently wrote an article for DesignM.ag on how to create a fixed navigation layout with CSS. You can check out the article here!
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…Read More
Related Posts
Author Bio
My name is Soh Tanaka and I am a Los Angeles based designer/front-end developer specializing in CSS driven web design with an emphasis on usability and search engine optimization. I also run a CSS Gallery which is updated daily with the best CSS websites from around the world. Come check it out!
You can learn more about me or 
Follow me on twitter for more updates and resources!
Did You Enjoy This Post?
Subscribe via RSS or by email to get all upcoming tutorials and articles delivered straight to you.
+ Add Comment13 Peeps Have Spoken Their Minds...
How would I go about having a section (the bottom) of a sidenav be fixed?
Nice job, thanks for sharing.
Sweet been working on something like this allready. Thanks for making my it a lot more easier for me.
@Montana, if you want a child element within the left nav to be fixed, instead of the #sidenav being fixed, you can make that element fixed instead. I hope that is what you were going for, if not just let me know~
@FireDart/JP your very welcome, I’m glad you found it useful :-)
Hi, I was wondering if the top logo / header (“Articles for web designers” or so) wouldn’t be better fixed ; only the content would be scrollable.
What do you think about it ? (Please pardon my deficient French-English)
Another awesome article. This will be great;y useful.
I never taught of it like this. You just tickled some creative spot of my brain.
Nice Job.
Hi – I use that – Thanx :)
Thanks for all the good stuff Soh. This is another great tut. One interesting thing if you try scrolling it with firebug showing Navigation also starts scrolling.
Hey Soh,
Thanks for writing back. I guess I am having a bit of trouble with your advice, basically I want the bottom of my sidebar on my blog (http://blog.complimedia.com) to scroll down once it reaches the top of the page.
Try scrolling to the bottom and you will notice it goes up and away with the rest of the bar. I have only seen this once and I forgot where! Stupid me.
Anyways thanks again for taking the time to help me and others out all the time, your amazing!
PS.
I forgot how much this blog’s design KICKS ASS! Its my favorite wordpress design by far.
你好，我是个中国人，懂的英语不多，很高兴看到你的站点，我很喜欢，对我很有帮助，谢谢你！
hello!,I am chinese,I know English only a little, I am very glad to see you web site,I love it very much!Very useful for me!
Thank you!
THIS IS A GREAT SEXY USEFULL SITE, subscribed the rss.
thanks
leon
This is exactly what my friend and I were looking for for our site. Thanks :D
Nice article, but how would one create a semi-sticky sidenav, like the one you have on this site?
Speak Your Mind...