Bootstrap: A Crash Course

Bootstrap: A Crash Course Part 4

April 4, 2015


Understanding and Working With Bootstrap Navbars Part A

This post will introduce you to Bootstrap’s navbars  which will allow you to create responsive menus for your site.

 There are two main views when it comes to Bootstrap navbars:

  1. A full menu view, with all of the main links displayed.
  2. A collapsed menu view with a button, that when pressed, will reveal the main links.

Today we are going to talk about the full menu view and how it works.

The Full Menu View

The full menu view is the menu you see when you view a Bootstrap site on larger screens, such as desktops. Like most menus you see online, it takes up the full width of the screen, has a site logo, and menu items for the viewer to explore. The great thing about Bootstrap’s navbars is not just their responsiveness, but how easy it is to utilize Bootstrap’s tools and features to get a menu setup quickly and professionally.

Step 1: The nav Element

<nav></nav>

This is the HTML 5 element that will hold the entire contents of our menu. For Bootstrap’s magic to work, we must add a class of navbar to the nav element.

<nav class="navbar"></nav>

Two nav styling options:

  • Light Gray
    <nav class=" navbar navbar-default"></nav>
  • Very Dark Gray
    <nav class="navbar navbar-inverse"></nav>

Three nav behaviors:

  • Fixed top – keeps the menu bar at the top of the page and in-view throughout the page.
    • <nav class="navbar navbar-default navbar-fixed-top"></nav>
  • Fixed bottom – keeps the menu bar at the bottom of the page an in-view throughout the page.
    • <nav class="navbar navbar-default navbar-fixed-bottom"></nav>
  • Static top – the menu bar at the top can be scrolled out-of-view
    • <nav class="navbar navbar-default navbar-static-top"></nav>

*NOTE: With the fixed navbar options, the navbar menu will be displayed on top of whatever content you are scrolling through. That said, whichever starting position the navbar is set to, the menu contents will be placed over the first or last 50 or so pixels of the page. To fix this, you can add padding to the body element to compensate. For example: if you have a fixed-top navbar, then you can add the padding-top style to the body element.

 Step 2: The container

If you remember from the previous post in this series, we used the .container element to hold all of the information for a particular piece of a website. The same thing will be done here, but in this case, for the menu bar.

Under the first nav element, we will place in a div with the class of container-fluid:

<nav>

<div class="container-fluid">

We use the container-fluid class here because we want the menu to take up the full width of the screen.

Step 3: The nav-header 

<div class="container-fluid">

  <div class="nav-header">

</div>

The nav-header is a class assigned to a div that resides in the .container div. This div will hold the site’s logo, name, and/or the slogan or catchphrase. Whatever you decide to put inside it must be placed within an anchor tag. The anchor tag will then be assigned a class called navbar-brand. The navbar-brand helps place the information provided in the anchor tag.

An example for this current website is:

<div class="nav-header">

  <a class="navbar-brand" href="home.html">
  <img src="logo.jpg">Weston Web & Creative
  </a>

</div>

Step 4: The div and ul

After closing the nav-header div, we will place in a new div element that does not require any class assignments. Within this div is the menu item links and other features like a search box.

<div></div>

Menu Links:

<div>

  <ul class="nav navbar-nav">

    <li><a href="#">Link 1</a></li>

    <li><a href="#">Link 2</a></li>

    <li><a href="#">Link 3</a></li>

  </ul>

</div>

 li Classes:

There two main li classes to know:

  • active – will display a highlighted box around the current page’s link in the menu
    • <li class="active"><a href="#">Home</a></li>
  • dropdown- will provide a drop down menu for additional sub-category links
    • <li class="dropdown">

In order for the dropdown class to work with the li element, you must assign the anchor tag inside a class of dropdown-toggle, set dropdown-toggle=”dropdown” (the li class), and the href=””.

<li class="dropdown">

<a class="dropdown-toggle" dropdown-toggle="dropdown" href="1.html">

Category 1<span class="caret"></span><!--puts an arrow next the Category 1-->

</a>

This tells the Bootstrap Framework that this menu item has a drop down list that can be opened or closed.

Once you have established the dropdown functionality to the li element, you input the ul element that will hold the subcategory links. The ul element will then be assigned the class of dropdown-menu.

<ul class="dropdown-menu">

  <li><a href="1.1.html">Category 1.1</a></li>

</ul>

Today we talked about the basic full menu view layout pieces and how they work. On the next post, Bootstrap: A Crash Course Part 5, we will discuss how to make the menu collapsible so it can be viewed on smaller-screened devices.

Here is the code in full:

<nav>
    <div class="container-fluid">
      <div class="nav-header">
        <a class="navbar-brand" href="home.html">
          <img src="logo.jpg">Weston Web & Creative
        </a>
    </div><!--end of nav-header-->
    <div><!--the menu items-->
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
        <a class="dropdown-toggle" dropdown-toggle="dropdown" href="1.html">
         Category 1<span class="caret"></span><!--puts an arrow next the Category 1-->
        </a>
        <ul class="dropdown-menu">
          <li>
          <a href="1.1.html">Category 1.1</a>
          </li>
        </ul>
    </div><!--end of menu items div-->
</nav><!--end of menu bar-->