In this new design, we need a logo in two spots, for two contexts:

Thanks to Bootstrap's responsive utility classes, we can do both! Here's how:

The resulting code should look like this:

<header role="banner">
  <div class="container">
    <a class="banner-brand" href="EB9781782164524_3.html"><img src="img/logo.png" alt="Bootstrappin'" width="180"></a>
  </div><!-- /.container -->
  <nav role="navigation" class="navbar navbar-default">

Save the changes and refresh the page in your browser. You should see the new copy of the logo above the navbar.

Now let's adjust our logos so that they are displayed only when needed.

In _variables.less, we need to double-check the value of the @grid-float-breakpoint variable. You'll find it by searching for the variable name. This value is set as follows in the default less/bootstrap/variables.less file:

// Point at which the navbar stops collapsing
@grid-float-breakpoint:     @screen-sm-min; 

This variable determines the point at which the navbar collapses for narrower viewports and expands for wider viewports. In our case, given the complexity of our navigation, we need to ensure that the navbar collapses at the next, larger breakpoint. Therefore, we need to ensure our variable is set at the @screen-md-min breakpoint. If you began with the 04_Code_BEGIN files, you should see this already set as follows. (If not, you'll need to update it.)

// Point at which the navbar stops collapsing
@grid-float-breakpoint:     @screen-md-min;

With this variable set appropriately, we now want the banner-brand class to display for medium and large viewports only and navbar-brand to display only for small and extra-small viewports. Bootstrap provides a set of helpful responsive utility classes to address just this need. You can see the documentation on these classes at http://getbootstrap.com/css/#responsive-utilities.

Let's put them to use for our purposes:

Save the changes and refresh the page, and you should see these results! In medium and large viewports, only the banner-brand class will appear:

In small and extra-small viewports, only the navbar-brand will appear:

Ah, the beauty of Bootstrap!

Now, let's make some adjustments to our navbar.

The navbar, with its seven items and submenus, reflects the needs of a large complex website.

The markup for the dropdown menus is taken directly from the Bootstrap navbar documentation at http://getbootstrap.com/components/#navbar.

If you look at our resulting markup, you'll notice these special classes and attributes:

Here is the resulting markup:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Shoes <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      ...
    </ul>
</li>

Also note the special tag and class used to display a small dropdown indicator: <b class="caret"></b>. (You'll see the CSS used to create this indicator in less/bootstrap/dropdowns.less.)

With the LESS, JavaScript, and markup in place, our navbar and its dropdowns should presently look and work as shown in the following screenshot. (Note that Bootstrap dropdowns respond on click.)

Now that we're familiar with the markup structure and have ensured everything's working as it should, let's move the All Departments menu to the right-hand end of the navbar, setting it apart from the others.

To do this, we need to nest this list item within its own unordered list as follows:

The newly added lines are highlighted in the following snippet—after which I'll include the original list item and link in context:

</ul>
<ul class="nav navbar-nav pull-right">
  <li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">All Departments <b class="caret"></b></a>

Save the changes and refresh the page, and you should see the All Departments drop-down menu item float to the right-hand end of the navbar as follows:

So far so good! Now, let's add our utility navigation.