Bootstrap: A Crash Course

Bootstrap: A Crash Course Part 5

April 6, 2015


Understanding and Working With Bootstrap Navbars Part B

This post will teach you how to make responsive collapsible navbars with Bootstrap.

Bootstrap’s collapsible navbar is ideal for smaller screen sizes where the space to display content is limited. When viewed on smaller devices, the navbar will simply have a site logo and/or name, and a button that will reveal menu links, when pressed, for easy navigation.

We’ll start with a refresher of the general layout of the nav section:

<nav class="navbar navbar-inverse"> 

 

  <div class="container-fluid"> 

 

    <div class="navbar-header"> 

 

      <a class="navbar-brand" href="#">WebSiteName</a> 

 

    </div><!--end of navbar-header--> 

 

  <div> 

 

    <ul class="nav navbar-nav"> 

 

      <li class="active"><a href="#">Home</a></li> 

 

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

 

    </ul> 

 

  </div><!--end of plain div--> 

 

  </div><!--end of container-fuild--> 

 

</nav>

Step 1: Adding the Menu Button

The menu button is what the user will click on to reveal the contents of the menu. From there, the user can navigate to a desired page. This button is placed within the navbar-header.

There are four properties for this button that we must include:

  • type – simply sets the button element to type button:
    type="button"
  • class– the button will be toggling the navbar so we will set the class to:
    class="navbar-toggle"
  • data-toggle– we want to toggle the contents of the menu from collapsed to open and vice-versa, so we will set the toggle type to:
    data-toggle="collapse"
  • data-target-Bootstrap needs to know what it is we are toggling. In this case it is the navbar, so we will set the data-target to:
    data-target="#mainNavbar"

    (the # is an id selector which we will use to grab the content of the navbar)

The button now needs something tangible for the user to click on. This can be anything you want, such as a letter, an image, etc. We’re going to place in the word, “Menu”.

The button should look like this:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavbar">Menu</button>

Step 2: Assign the plan div with the menu items to collapsible

Remember that plain div element that did not have any CSS selectors assigned to it in the last post? With collapsible menus, that plain div will be given a class and id selector.

  •  The class selector- this allows Bootstrap to style your open navbar:
    class="collapse navbar-collapse"
  • The id selector- this have the same name as the data-target because this is how Bootstrap knows what exactly to exactl:
    id="mainNavbar"
    • *Note: there is not a “#” before mainNavbar here. This is where you set the id of mainNavbar, whereas earlier with the data-target, was where you grabbed this div with #mainNavbar

The div should look like:

<div class="collapse navbar-collapse" id="mainNavbar">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
  </ul>
</div>

That’s all you need to know to make a collapsible Bootstrap menu. In a short summary:

  • Add a button with the attributes listed above into the navbar-header div and something for the user to click on between the opening and closing button tags
  • Add class and id selectors to the div that holds the menu items.

 

 

Here is the code in full:

<nav class=“navbar navbar-inverse”>

  <div class="container-fluid">

    <div class=“navbar-header”>

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavbar">

      Menu

      </button>

      <a class=“navbar-brand” href=“#”>WebSiteName</a>

    </div><!--end of navbar-header-->

  <div class=”collapse navbar-collapse” id=”mainNavbar”>

    <ul class="nav navbar-nav">

      <li class=“active”><a href=“#”>Home</a></li>

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

    </ul>

  </div><!--end of plain div-->

  </div><!–end of container-fuild–>

</nav>