r-pay-ō.com

Bootstrap Fixed Sidebar (Navigation Bar) – Top pick

I’ve been working on another project for my company and came across some code I think is worth sharing. I needed to make a single page website that producers could walk potential guests through to navigate the various segments the company produces for each guest, as well as serve as a reference for potential guests to peruse at the leisure.

Figuring out the layout

As I was laying out the page a fixed navigation bar at the top seemed too clunky so I wanted a static header with a fixed navigation sidebar beneath it. A Google search for bootstrap fixed sidebars turned up quite a few results but here’s my favorite one. This link will take you to the page I found (and the HTML and CSS code) and we’ll explore how I implemented it below.

Getting the page ready

The first thing I did was create a new HTML5 project in my Cloud9 IDE.

Since I wasn’t going to be using vanilla Bootstrap, I added my own custom stylesheet at the bottom and created the file in a css folder I also created in the project, which also included the css file I needed for the Bootstrap fixed sidebar.

Actually building the page, finally…

Up next I created my header. The header will just be a blank Bootstrap static navbar without any links and a responsive image for the company logo:

In conclusion (AKA: Where you stop reading probably)

I’d say that the number one lesson I learned from creating this project was to fully understand the problem and solution before writing a single line of code. My knee jerk reaction was to create another Rails application, but the more I thought about what would solve the problem the more I realized that a simple single page website would serve as the perfect solution.