InfoGuides: Using Bootstrap in LibGuides: Navigation Bar

Authored by

Robert "Bob" Smith

Bob originally created this guide. The goal was to assist librarians in utilizing Bootstrap within LibGuides.

As of Feb. 2nd, 2024, Bob has left the employ of West Texas A&M University.

Introduction

The Navigation Bar provides you the ability to create a fully responsive main navigation bar with many useful tools and options. This page will be particularly useful to those individuals or groups that would like to create a custom header within LibGuides. For those who do not have control over the header, this may still come in handy if you want to create a more in-depth page navigation.

As you will repeatedly find with most of these components, there are accessibility considerations.

Example

Code with Explanations

<nav class="navbar navbar-default">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#basic1" aria-expanded="false">
      <span class="sr-only">Toggle navigation menu</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="https://www.wtamu.edu/library/">Cornette Library</a>
  </div>
  <div class="collapse navbar-collapse" id="basic1">
    <ul class="nav navbar-nav">
      <li><a href="https://infoguides.wtamu.edu/az.php">Databases</a></li>
      <li><a href="https://infoguides.wtamu.edu/">Subject Guides</a></li>
      <li><a href="https://infoguides.wtamu.edu/courseGuides">Course Guides</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Librarians <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Librarian One</a></li>
          <li><a href="#">Librarian Two</a></li>
          <li><a href="#">Library Three</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Code for Copying

Navbar Customization and Options

The following are further customization options available to you using Bootstrap's Navbar

Insert a Brand Image: You can have a brand icon (e.g. ) instead of a brand name (the "Cornette Library") by placing an <img> inside the <a> instead of text.
Add Forms: Style forms right inside of your navbar.
Use Buttons: Add a button to your navbar.
Aligning Elements within the Navbar: For instance, "My Library Account" on the main menu is aligned right.
Fixed Navbars: You can fix the Navbar to the top or bottom of your page.
Inverted Navbar: Background becomes black and the font is white/gray.

Navigation Bar Accessibility Fixes

The default coloring for the navigation bar is partially WCAG 2.0 AA compliant (good for large text and fails for small text). The following CSS edits are suggestions for making it fully AA and AAA.

Full AA Compliance

.navbar-default .navbar-brand,.navbar-default .navbar-nav>li>a{color: #666666}

Full AAA Compliance

.navbar-default .navbar-brand,.navbar-default .navbar-nav>li>a{color:#4A4A4A}

.navbar-brand:focus, .navbar-default .navbar-brand:hover,.navbar-default .navbar-nav>li>a:hover,navbar-default .navbar-nav>li>a:focus{color:#595959;background-color:#fff}

For Further Information

For further information on Bootstrap Navigation Bars, please see the following websites: