Bootstrap – Positioning the Navbar

When you google for questions people ask about how to use Bootstrap you will find that a lot of those questions are related to the positioning of the Navbar.

Navbar at the top of the page

Bootstrap templates almost always have a Navbar at the top. There are several methods to achieve this. Even if you do not want the Navbar to appear at the top you need to understand how this works. So I’ll start with explaining the methods to achieve the top position:

  • Top position achieved with order in HTML structure.
  • Top position with Bootstrap’s class ‘navbar-static-top’.
  • Top position with Bootstrap’s class ‘navbar-fixed-top’.
  • Top position with my own approach (SEO-friendly).

Top position achieved with order in HTML structure

You can have the Navbar appear at the top simply by putting it first in the HTML structure of your page directly after the opening body tag.

<div class="container">
<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

Below you can see the result you will get:

Navbar position based on HTML

This approach will position the Navbar at the top of the page. If your content is longer than the browser window and someone scrolls the page the Navbar will stay above the content and will not stay visible in the browser.

Top position with Bootstrap’s class ‘navbar-static-top’

Bootstrap provides us with the class ‘navbar-static-top’ to position the Navbar at the top of a web page. Basically this does the same as method no. 1 above. With this Bootstrap class you still need to have the Navbar markup at the top of your HTML structure. If you’re Navbar is lower down in the HTML structure you cannot set it at the top of the page by adding this class to the Navbar.

The class ‘navbar-static-top’ also explicitly sets the width of the Navbar. The width becomes the same as that of the container.

Top position with Bootstrap’s class ‘navbar-fixed-top’

Bootstrap also provides us with the class ‘navbar-fixed-top’. With this class you can make the Navbar appear at the top even if its lower down in the HTML structure of the page.

Below you can see a HTML structure with the Navbar below the Hero unit:

<body>
<header class="hero-unit">
                <h1>Hello, world!</h1>
                <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
                <p><a class="btn btn-primary btn-large">Learn more »</a></p>
            </header>
<nav class="navbar navbar-fixed-top">
<div class="navbar-inner">
<ul class="nav">
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>
</div>
</nav>
</body>
</html>

Although the Navbar comes after the Hero unit in this HTML structure it will still appear at the top because of the class label ‘navbar-fixed-top’.

It’s important to realize that with ‘navbar-fixed-top’ we position the Navbar at the top of the browser window. If someone scrolls down our web page the Navbar will stay visible and the content will slide away behind the Navbar.

Navbar with fixed position

Do not forget to add padding to the top of the body when you use ‘navbar-fixed-top’. Bootstrap recommends to use a padding of at least 40px. If you forget this part of the content will always be hidden behind the Navbar.

Top position with my own approach (SEO-friendly)

Search engines try to understand what our web page is all about. In doing so some information on the web page is more important than other information. The order in which information is structured with HTML also play a role in search engine optimization. If you want to get a higher ranking in search engines (and who doesn’t) you will want important content to sit before elements like sidebars or navigation in the HTML structure. But if you put the Navbar lower down in the HTML structure to make your web page more SEO-friendly how do you make it appear at the top of your web page? One method is to use the class ‘navbar-fixed-top’. But as you will now know that means that the Navbar is fixed to the top of the browser window and not to the top of the page.

I will discuss several problems that might arise for search engines when you use the default Bootstrap approach for the layout of a web page in another post. In that post I will also tell you about an SEO-friendly method to  let the Navbar appear at the top of the page although its inserted lower in the HTML structure.

Navbar below the header section

To position the Navbar below a header section you normally only need to do one thing:

- Insert a header section before the nav section in the HTML markup.

When you start your design from scratch it’s as simple as that!

But because sometimes we jump-start our design with an existing Bootstrap template we need to check the classes used for the Navbar in the template. Quite a few templates already contain the class ‘navbar-fixed-top’. If you Navbar appears elsewhere on the page than you expected it to be sure to check for any extra class labels that might cause this.

Another thing you need to be aware of when you use a Navbar below a Hero unit is the space that will show up between the two:

Navbar below header

To fix this we need to set the bottom margin for the Hero Unit to 0px (the Bootstrap style sheet uses 30px):

<style>
.hero-unit {
	margin-bottom: 0;
}
</style>

Navbar positioned at the bottom

Bootstrap also provides us with a class ‘navbar-fixed-bottom’ that will position the Navbar at the bottom.

Navbar fixed bottom
Again this means that the Navbar will appear at the bottom of the browser window. Not the bottom of the page.

Remark regarding uses of ‘navbar-fixed-top’ etc.

For reasons unknown to me the Navbar gets a full-width when you use ‘navbar-fixed-top’ or ‘navbar-fixed-bottom’.

The effect will look like this:

navbar to far to the left

Personally I do not like this and to fix this I use:

.navbar-fixed-top ,
.navbar-fixed-bottom {
  width: 940px;
  margin-left: auto;
  margin-right: auto;
}

These are the Bootstrap tutorials in this series: