bootstrap fixed sidebar meme

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 this was going to be a page, rather than a Rails application, the next thing I needed to do was get it ready for bootstrap:

index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width-device-width, initial-scale=1.0">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        
        <!-- Optional theme -->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        
        <!-- Latest compiled and minified JavaScript -->
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <!-- Sidenav CSS File I Found -->
        <link rel="stylesheet" href="css/sidebar.css">

        <!-- My style sheet -->
        <link rel="stylesheet" href="css/custom.css">


     </head>
</html>

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:

index.html
    <body>
      <div class="head-default">
        <a class="navbar-brand" href="#"><div class="back"><img class="img-responsive" src="img/company_logo.png"></div></a>
      </div>
    <body>
</html>

My logo is created in the img folder I created and is now within my header, but I needed to start writing my custom.css code to actually get the picture I needed in my banner.

css/custom.css
  .head-default {
    background-image: url("../img/header-image.png");
    background-position: top center !important;
    background-size: cover !important;
    background-repeat: no-repeat;
    background-attachment: fixed !important;
    padding: 0 0 20px;
    font-family: 'Lato', sans-serif;
    min-height: 140px;
    overflow: visible;
}

Adding the sidebar

Up next is adding the sidebar, without the dropdown menu that I don’t need:

index.html
      <nav class="navbar navbar-default sidebar" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>      
        </div>
        <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class=""><a href="#firstSection">About <strong><i>Show Name</i></strong><span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-info-sign"></span></a></li>
            <li><a href="#secondSection">What We Produce<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-education"></span></a></li>
            <li><a href="#thirdSection">Next Steps<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-hand-right"></span></a></li>
          </ul>
        </div>
      </nav>

With our header and sidebar navigation set up now we just have to actually code our main content, each section with the appropriate id="" to correspond to the href="#..".

index.html
<!-- BEGINNING OF GUIDE -->
      <div class="container">
        <div class="row">
          <div class="col-xs-10 col-xs-offset-2">
            <div class="row">
              <div class="col-xs-11">
                <h2 class="anchor" id="firstSection">About <strong><i>SHOW NAME</i></strong></h2>
                <p><strong><i>SHOW NAME</strong></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce feugiat accumsan pretium. Aenean porttitor porta nibh, at congue nulla ullamcorper eu. Etiam porta scelerisque pellentesque.</p>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-11">
                <h2 class="" id="secondSection" style="margin-top: 40px">What We Produce</h2>
                <p><strong><i>SHOW NAME</i></strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce feugiat accumsan pretium. Aenean porttitor porta nibh, at congue nulla ullamcorper eu. Etiam porta scelerisque pellentesque.</p>
              </div>
            </div>
          <!-- More content -->
          </div>
        </div>
      </div>

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.

Loading Facebook Comments ...

Leave a Reply

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