You’ve seen them everywhere. You know what I mean. Some hipster thinks it’s cool to make a full-height, fixed sidebar to replace the normal top-bar navigation. Of course, no one will tell you the hell you’ll go through to make it responsive and the inevitable complete rewrite you’ll make in 6 months time.

But let’s forget that for now and learn how to make a fixed-width side navigation bar just like this here blog.

TL;DR

1. Split your content in to two DIVs. Left and Right. Nav and Main. Statler and Waldorf. It honestly doesn’t matter.
2. Whichever side is your nav must have: position: fixed; and height: 100%;
3. Your main content panel must have: float:right; and the width is 100%-sizeOfNavPanel

That’s kind of it. You can do all sorts of other things, obviously. In this example, I’ve added a few more styles to make a nice color-selection site, but the principles can be applied to anything.

The set up

First thing to do is create your basic structure. To be honest, most of this is to do with CSS, so the HTML will be your own variation of: After you’ve got something that looks like that, the output will definitely not be what you want it to be yet. In fact it will look something like this:

The important bit

The basics of achieving are pretty simple to be honest. Float your .right element to the right and make sure their respective widths add up to 100%. I’ve commented the CSS so you can see it in action.

Troubleshooting

1. Sometimes things won’t be flush up to the top of the page. This is because browsers have their own ideas about defining padding. Just do something like this at the top of your CSS file to remove default margins. Or if you don’t hate yourself, use normalize.css
2. You will have no other issues.

Output

I’m not going to tell you what colors, styles, widths, or anything else you want to do. Do that yourself. Here’s a very simple, fully-worked, example of a fixed side-nav bar in action:

See the Pen Side-bar Color Picker by Ed Gordon (@edwardcgordon) on CodePen.

Warning note

This layout starts looking awful on more horizontally challenged devices. I would recommend only using this if your traffic is driven entirely by desktop traffic that you get through spamming your friends and family with links to your latest awseome blog (much like my own). Or, you could change the layout based on which device is accessing your site of course.