24. Bootstrap Navbar

  • We'll add a modified version of the Bootstrap navbar template to our site layout.
  • Remember that changes to the application layout file will show up on all pages of our site.

###app/views/layouts/application.html.erb

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class='container'>
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="/" class="navbar-brand">SaaS</a>
    </div>
    <div class="collapse navbar-collapse" id="main-nav-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/about">About</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div>
</nav>

###Terminal

git status
git add .
git commit -m "Added navbar to layout"
git push origin pages_and_layout

Complete and Continue