diff --git a/dist/ratchet.css b/dist/ratchet.css
index b38f510..a5d9cb6 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -304,7 +304,7 @@ strong {
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
 }
 
-.bar-title {
+.bar-nav {
   top: 0;
   display: -webkit-box;
   display: box;
@@ -380,14 +380,14 @@ strong {
   color: #007aff;
 }
 
-.popover .bar-title {
+.popover .bar-nav {
   padding-right: 15px;
   padding-left: 15px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 12px 12px 0 0;
   box-shadow: none;
 }
-.popover .bar-title .title + [class*="button"]:last-child {
+.popover .bar-nav .title + [class*="button"]:last-child {
   right: 15px;
 }
 
@@ -658,7 +658,7 @@ select {
   font-size: 16px;
 }
 
-.bar-title [class*="button"] {
+.bar-nav [class*="button"] {
   position: relative;
   z-index: 10;
   padding: 0;
@@ -673,32 +673,32 @@ select {
   -webkit-box-flex: 0;
   box-flex: 0;
 }
-.bar-title .title + [class*="button"]:last-child,
-.bar-title .button + [class*="button"]:last-child,
-.bar-title [class*="button"].pull-right {
+.bar-nav .title + [class*="button"]:last-child,
+.bar-nav .button + [class*="button"]:last-child,
+.bar-nav [class*="button"].pull-right {
   position: absolute;
   top: 5px;
   right: 10px;
 }
-.bar-title .button:active,
-.bar-title .button.active,
-.bar-title .button-prev:active,
-.bar-title .button-prev.active,
-.bar-title .button-next:active,
-.bar-title .button-next.active,
-.bar-title .button-primary:active,
-.bar-title .button-primary.active {
+.bar-nav .button:active,
+.bar-nav .button.active,
+.bar-nav .button-prev:active,
+.bar-nav .button-prev.active,
+.bar-nav .button-next:active,
+.bar-nav .button-next.active,
+.bar-nav .button-primary:active,
+.bar-nav .button-primary.active {
   color: #007aff;
   background-color: transparent;
   opacity: .3;
 }
-.bar-title .button-primary {
+.bar-nav .button-primary {
   font-weight: 500;
 }
-.bar-title .button-prev:before,
-.bar-title .button-prev:after,
-.bar-title .button-next:before,
-.bar-title .button-next:after {
+.bar-nav .button-prev:before,
+.bar-nav .button-prev:after,
+.bar-nav .button-next:before,
+.bar-nav .button-next:after {
   position: absolute;
   display: block;
   width: 15px;
@@ -706,37 +706,37 @@ select {
   background-color: #007aff;
   content: '';
 }
-.bar-title .button-prev {
+.bar-nav .button-prev {
   padding-left: 20px;
   margin-left: -5px;
 }
-.bar-title .button-next {
+.bar-nav .button-next {
   padding-right: 20px;
   margin-right: -5px;
 }
-.bar-title .button-prev:before,
-.bar-title .button-prev:after {
+.bar-nav .button-prev:before,
+.bar-nav .button-prev:after {
   left: 0;
 }
-.bar-title .button-next:before,
-.bar-title .button-next:after {
+.bar-nav .button-next:before,
+.bar-nav .button-next:after {
   right: 0;
 }
-.bar-title .button-prev:before,
-.bar-title .button-next:before {
+.bar-nav .button-prev:before,
+.bar-nav .button-next:before {
   top: 16px;
 }
-.bar-title .button-prev:after,
-.bar-title .button-next:after {
+.bar-nav .button-prev:after,
+.bar-nav .button-next:after {
   top: 25px;
 }
-.bar-title .button-prev:before,
-.bar-title .button-next:after {
+.bar-nav .button-prev:before,
+.bar-nav .button-next:after {
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
-.bar-title .button-prev:after,
-.bar-title .button-next:before {
+.bar-nav .button-prev:after,
+.bar-nav .button-next:before {
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
 }
@@ -890,7 +890,7 @@ input[type="button"] {
   box-flex: 1;
 }
 
-.bar-title .segmented-controller {
+.bar-nav .segmented-controller {
   margin-bottom: 4px;
 }
 
diff --git a/dist/theme-classic.css b/dist/theme-classic.css
index d13bcca..a31f390 100644
--- a/dist/theme-classic.css
+++ b/dist/theme-classic.css
@@ -19,7 +19,7 @@
   background-color: rgba(245, 245, 245, 0.98);
 }
 
-.bar-title {
+.bar-nav {
   top: 20px;
   box-shadow: 0 -20px 0 rgba(30, 176, 233, 0.98), 0 0 1px rgba(0, 0, 0, 0.85);
 }
diff --git a/examples/app-classic/checkout.html b/examples/app-classic/checkout.html
index b8a8a79..c984995 100644
--- a/examples/app-classic/checkout.html
+++ b/examples/app-classic/checkout.html
@@ -18,7 +18,7 @@
 
   </head>
   <body>
-  <header class="bar-title">
+  <header class="bar-nav">
     <a class="button-prev" href="choose-theater.html" data-transition="slide-out">
       Back
     </a>
diff --git a/examples/app-classic/choose-movie.html b/examples/app-classic/choose-movie.html
index 16bd3b2..0366b8e 100644
--- a/examples/app-classic/choose-movie.html
+++ b/examples/app-classic/choose-movie.html
@@ -19,7 +19,7 @@
   </head>
   <body>
 
-  <header class="bar-title">
+  <header class="bar-nav">
     <a class="button-prev" href="theaters.html" data-transition="slide-out">
       Back
     </a>
diff --git a/examples/app-classic/choose-theater.html b/examples/app-classic/choose-theater.html
index 0a24098..42f7150 100644
--- a/examples/app-classic/choose-theater.html
+++ b/examples/app-classic/choose-theater.html
@@ -19,7 +19,7 @@
   </head>
   <body>
 
-  <header class="bar-title">
+  <header class="bar-nav">
     <a class="button-prev" href="index.html" data-transition="slide-out">
       Back
     </a>
diff --git a/examples/app-classic/index.html b/examples/app-classic/index.html
index 5f726a2..6d6fcee 100644
--- a/examples/app-classic/index.html
+++ b/examples/app-classic/index.html
@@ -19,7 +19,7 @@
   </head>
   <body>
 
-  <header class="bar-title">
+  <header class="bar-nav">
     <h1 class="title">Movie finder</h1>
   </header>
   <nav class="bar-standard bar-header-secondary">
diff --git a/examples/app-classic/settings.html b/examples/app-classic/settings.html
index dc87f44..bb7f50d 100644
--- a/examples/app-classic/settings.html
+++ b/examples/app-classic/settings.html
@@ -19,7 +19,7 @@
   </head>
   <body>
 
-  <header class="bar-title">
+  <header class="bar-nav">
     <h1 class="title">Settings</h1>
   </header>
 
diff --git a/examples/app-classic/theaters.html b/examples/app-classic/theaters.html
index b52ea3e..0edaca6 100644
--- a/examples/app-classic/theaters.html
+++ b/examples/app-classic/theaters.html
@@ -18,7 +18,7 @@
   </head>
   <body>
 
-  <header class="bar-title">
+  <header class="bar-nav">
     <h1 class="title">Find a theater</h1>
   </header>
   <nav class="bar-standard bar-header-secondary">
diff --git a/examples/app-default/checkout.html b/examples/app-default/checkout.html
index 3f598d6..5e9ce77 100644
--- a/examples/app-default/checkout.html
+++ b/examples/app-default/checkout.html
@@ -17,7 +17,7 @@
 
   </head>
   <body>
-  <header class="bar-title">
+  <header class="bar-nav">
     <a class="button-prev" href="choose-theater.html" data-transition="slide-out">
       Back
     </a>
diff --git a/examples/app-default/choose-movie.html b/examples/app-default/choose-movie.html
index a9c7e61..a169bf9 100644
--- a/examples/app-default/choose-movie.html
+++ b/examples/app-default/choose-movie.html
@@ -18,7 +18,7 @@
   </head>
   <body>
 
-  <header class="bar-title">
+  <header class="bar-nav">
     <a class="button-prev" href="theaters.html" data-transition="slide-out">
       Back
     </a>
diff --git a/examples/app-default/choose-theater.html b/examples/app-default/choose-theater.html
index 4956b10..2966b75 100644
--- a/examples/app-default/choose-theater.html
+++ b/examples/app-default/choose-theater.html
@@ -18,7 +18,7 @@
   </head>
   <body>
 
-  <header class="bar-title">
+  <header class="bar-nav">
     <a class="button-prev" href="index.html" data-transition="slide-out">
       Back
     </a>
diff --git a/examples/app-default/index.html b/examples/app-default/index.html
index 8ea03db..72f0fee 100644
--- a/examples/app-default/index.html
+++ b/examples/app-default/index.html
@@ -18,7 +18,7 @@
   </head>
   <body>
 
-  <header class="bar-title">
+  <header class="bar-nav">
     <h1 class="title">Movie finder</h1>
   </header>
   <nav class="bar-standard bar-header-secondary">
diff --git a/examples/app-default/settings.html b/examples/app-default/settings.html
index f809d73..ab3e2db 100644
--- a/examples/app-default/settings.html
+++ b/examples/app-default/settings.html
@@ -18,7 +18,7 @@
   </head>
   <body>
 
-  <header class="bar-title">
+  <header class="bar-nav">
     <h1 class="title">Settings</h1>
   </header>
 
diff --git a/examples/app-default/theaters.html b/examples/app-default/theaters.html
index e1ef870..3ec8ad8 100644
--- a/examples/app-default/theaters.html
+++ b/examples/app-default/theaters.html
@@ -18,7 +18,7 @@
   </head>
   <body>
 
-  <header class="bar-title">
+  <header class="bar-nav">
     <h1 class="title">Find a theater</h1>
   </header>
   <nav class="bar-standard bar-header-secondary">
diff --git a/examples/components/classic/index.html b/examples/components/classic/index.html
index a2b6643..05e7e4e 100644
--- a/examples/components/classic/index.html
+++ b/examples/components/classic/index.html
@@ -36,7 +36,7 @@
 
   <!-- POPOVER ============================================================ -->
   <div id="myPopover" class="popover">
-    <header class="bar-title">
+    <header class="bar-nav">
       <a class="button" href="#">
         Open
       </a>
@@ -62,7 +62,7 @@
 
   <div class="content">
 
-  <header class="bar-title">
+  <header class="bar-nav">
     <ul class="segmented-controller">
       <li class="active">
         <a href="#item1">Thing one</a>
@@ -97,7 +97,7 @@
   <!-- TITLEBAR ============================================================ -->
 
   <!-- Title-bar left and right buttons -->
-  <header class="bar-title">
+  <header class="bar-nav">
     <a class="button button-prev" href="#">
       Left
     </a>
@@ -108,12 +108,12 @@
   </header>
 
   <!-- Title-bar -->
-  <header class="bar-title">
+  <header class="bar-nav">
     <h1 class="title"><a href="#myPopover">Title</a></h1>
   </header>
 
   <!-- Title-bar left button -->
-  <header class="bar-title">
+  <header class="bar-nav">
     <a class="button open-shelf" href="#">
       Open fatty
     </a>
@@ -121,7 +121,7 @@
   </header>
 
   <!-- Title-bar right button -->
-  <header class="bar-title">
+  <header class="bar-nav">
     <h1 class="title">Title</h1>
     <a class="button" href="#">
       Filter
@@ -131,7 +131,7 @@
   <div class="test"></div>
 
   <!-- Title-bar right button -->
-  <header class="bar-title">
+  <header class="bar-nav">
     <ul class="segmented-controller">
       <li class="active">
         <a href="#">Thing one</a>
@@ -146,7 +146,7 @@
   </header>
 
   <!-- Title-bar left button -->
-  <header class="bar-title" id="newshit">
+  <header class="bar-nav" id="newshit">
     <a class="button-primary open-shelf" href="#">
       Open
     </a>
@@ -161,7 +161,7 @@
   </header>
 
   <!-- Title-bar left button -->
-  <header class="bar-title">
+  <header class="bar-nav">
     <ul class="segmented-controller">
       <li>
         <a href="#">Thing one</a>
@@ -176,7 +176,7 @@
   </header>
 
   <!-- Title-bar left button -->
-  <header class="bar-title">
+  <header class="bar-nav">
     <a class="button open-shelf" href="#">
       Open
     </a>
diff --git a/examples/components/classic/modals.html b/examples/components/classic/modals.html
index 88b04dc..33ba5b6 100644
--- a/examples/components/classic/modals.html
+++ b/examples/components/classic/modals.html
@@ -12,7 +12,7 @@
   </head>
   <body>
 
-  <header class="bar-title">
+  <header class="bar-nav">
     <h1 class="title">Modal slideup</h1>
   </header>
   
@@ -21,7 +21,7 @@
   </div>
 
   <div id="myModal" class="modal">
-    <header class="bar-title">
+    <header class="bar-nav">
       <h1 class="title">Modal</h1>
       <a class="button" href="#myModal">
         Close
diff --git a/examples/components/default/index.html b/examples/components/default/index.html
index 4717d6f..092467a 100644
--- a/examples/components/default/index.html
+++ b/examples/components/default/index.html
@@ -36,7 +36,7 @@
 
   <!-- POPOVER ============================================================ -->
   <div id="myPopover" class="popover">
-    <header class="bar-title">
+    <header class="bar-nav">
       <a class="button" href="#">
         Open
       </a>
@@ -62,7 +62,7 @@
 
   <div class="content">
 
-  <header class="bar-title">
+  <header class="bar-nav">
     <ul class="segmented-controller">
       <li class="active">
         <a href="#item1">Thing one</a>
@@ -97,7 +97,7 @@
   <!-- TITLEBAR ============================================================ -->
 
   <!-- Title-bar left and right buttons -->
-  <header class="bar-title">
+  <header class="bar-nav">
     <a class="button button-prev" href="#">
       Left
     </a>
@@ -108,12 +108,12 @@
   </header>
 
   <!-- Title-bar -->
-  <header class="bar-title">
+  <header class="bar-nav">
     <h1 class="title"><a href="#myPopover">Title</a></h1>
   </header>
 
   <!-- Title-bar left button -->
-  <header class="bar-title">
+  <header class="bar-nav">
     <a class="button open-shelf" href="#">
       Open fatty
     </a>
@@ -121,7 +121,7 @@
   </header>
 
   <!-- Title-bar right button -->
-  <header class="bar-title">
+  <header class="bar-nav">
     <h1 class="title">Title</h1>
     <a class="button" href="#">
       Filter
@@ -131,7 +131,7 @@
   <div class="test"></div>
 
   <!-- Title-bar right button -->
-  <header class="bar-title">
+  <header class="bar-nav">
     <ul class="segmented-controller">
       <li class="active">
         <a href="#">Thing one</a>
@@ -146,7 +146,7 @@
   </header>
 
   <!-- Title-bar left button -->
-  <header class="bar-title" id="newshit">
+  <header class="bar-nav" id="newshit">
     <a class="button-primary open-shelf" href="#">
       Open
     </a>
@@ -161,7 +161,7 @@
   </header>
 
   <!-- Title-bar left button -->
-  <header class="bar-title">
+  <header class="bar-nav">
     <ul class="segmented-controller">
       <li>
         <a href="#">Thing one</a>
@@ -176,7 +176,7 @@
   </header>
 
   <!-- Title-bar left button -->
-  <header class="bar-title">
+  <header class="bar-nav">
     <a class="button open-shelf" href="#">
       Open
     </a>
diff --git a/examples/components/default/modals.html b/examples/components/default/modals.html
index 02b50ef..ceaf169 100644
--- a/examples/components/default/modals.html
+++ b/examples/components/default/modals.html
@@ -11,7 +11,7 @@
   </head>
   <body>
 
-  <header class="bar-title">
+  <header class="bar-nav">
     <h1 class="title">Modal slideup</h1>
   </header>
   
@@ -20,7 +20,7 @@
   </div>
 
   <div id="myModal" class="modal">
-    <header class="bar-title">
+    <header class="bar-nav">
       <h1 class="title">Modal</h1>
       <a class="button" href="#myModal">
         Close
diff --git a/index.html b/index.html
index 1eb1bd5..1ee3aa0 100644
--- a/index.html
+++ b/index.html
@@ -49,7 +49,7 @@ layout: default
       <div class="iphone">
         <div class="iphone-content">
           <div id="iwindow">
-            <header class="bar-title">
+            <header class="bar-nav">
               <h1 class="title">Title</h1>
             </header>
           </div>
@@ -62,13 +62,13 @@ layout: default
         <p class="component-description">Title bars are full width and docked to the top of the viewport.</p>
 
         <div class="component-example component-example-fullbleed">
-          <header class="bar-title">
+          <header class="bar-nav">
             <h1 class="title">Title</h1>
           </header>
         </div>
 
 <pre class="prettyprint">
-&lt;header class=&quot;bar-title&quot;&gt;
+&lt;header class=&quot;bar-nav&quot;&gt;
 &lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
 &lt;/header&gt;
 </pre>
@@ -80,7 +80,7 @@ layout: default
         <p class="component-description">Buttons in a title bar are left or right aligned and should be used for actions.</p>
 
         <div class="component-example component-example-fullbleed">
-          <header class="bar-title">
+          <header class="bar-nav">
             <a class="button">
               Left
             </a>
@@ -92,7 +92,7 @@ layout: default
         </div>
 
 <pre class="prettyprint">
-&lt;header class=&quot;bar-title&quot;&gt;
+&lt;header class=&quot;bar-nav&quot;&gt;
 &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
 Left
 &lt;/a&gt;
@@ -109,7 +109,7 @@ Right
         <p class="component-description">Directional buttons in a title bar should be used for navigational purposes.</p>
 
         <div class="component-example component-example-fullbleed">
-          <header class="bar-title">
+          <header class="bar-nav">
             <a class="button-prev">
               Previous
             </a>
@@ -121,7 +121,7 @@ Right
         </div>
 
 <pre class="prettyprint">
-&lt;header class=&quot;bar-title&quot;&gt;
+&lt;header class=&quot;bar-nav&quot;&gt;
 &lt;a class=&quot;button-prev&quot; href=&quot;#&quot;&gt;
 Previous
 &lt;/a&gt;
@@ -139,7 +139,7 @@ Next
         <p class="component-description">Title bars can also house segmented controllers (with or without accompanying buttons). It all uses flex-box to create perfectly even spacing no matter their labels.</p>
 
         <div class="component-example component-example-fullbleed">
-          <header class="bar-title">
+          <header class="bar-nav">
             <a class="button">
               Left
             </a>
@@ -161,7 +161,7 @@ Next
         </div>
 
 <pre class="prettyprint">
-&lt;header class=&quot;bar-title&quot;&gt;
+&lt;header class=&quot;bar-nav&quot;&gt;
 &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
 Left
 &lt;/a&gt;
@@ -858,7 +858,7 @@ document
 
       <div class="component-example">
         <div id="popover" class="popover">  
-          <header class="bar-title">
+          <header class="bar-nav">
             <a class="button">
               Left
             </a>
@@ -882,7 +882,7 @@ document
 
 <pre class="prettyprint">
 &lt;div id=&quot;myPopover&quot; class=&quot;popover&quot;&gt;
-&lt;header class=&quot;bar-title&quot;&gt;
+&lt;header class=&quot;bar-nav&quot;&gt;
 &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
   Left
 &lt;/a&gt;
@@ -907,7 +907,7 @@ document
       <p class="component-description">Popovers are designed to only fire from <a href="#bars">title bars</a>. Set the value of the title href to the id of a popover, like so:</p>
 
 <pre class="prettyprint">
-&lt;header class=&quot;bar-title&quot;&gt;
+&lt;header class=&quot;bar-nav&quot;&gt;
 &lt;a href=&quot;#myPopover&quot;&gt;
 &lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
 &lt;/a&gt;
@@ -923,7 +923,7 @@ document
       <div class="component-example">
         <a href="#myModalexample" class="button">Open modal</a>
         <div id="myModalexample" class="modal">
-          <header class="bar-title">
+          <header class="bar-nav">
             <h1 class="title">Modal</h1>
             <a class="button" href="#myModalexample">
               Close
@@ -941,7 +941,7 @@ document
 &lt;a href=&quot;#myModal&quot; class=&quot;button&quot;&gt;Open modal&lt;/a&gt;
 
 &lt;div id=&quot;myModal&quot; class=&quot;modal&quot;&gt;
-&lt;header class=&quot;bar-title&quot;&gt;
+&lt;header class=&quot;bar-nav&quot;&gt;
 &lt;h1 class=&quot;title&quot;&gt;Modal&lt;/h1&gt;
 &lt;a class=&quot;button&quot; href=&quot;#myModal&quot;&gt;
   Close
@@ -1018,7 +1018,7 @@ document
 &lt;a href=&quot;two.html&quot;&gt;Two&lt;a&gt;
 </pre>
 
-      <p class="component-note">This will use push to replace everything in the .content div with the .content of two.html. Also, it will either update or remove .bar-title and .bar-tab according to their presences in two.html.</p>
+      <p class="component-note">This will use push to replace everything in the .content div with the .content of two.html. Also, it will either update or remove .bar-nav and .bar-tab according to their presences in two.html.</p>
 
       <p class="component-description">Now that pages are being loaded through push, it's easy to specify transitions for animations between pages. There are three different transitions to chose from: <code>fade</code>, <code>slide-in</code>, or <code>slide-out</code>.</p>
 
@@ -1030,7 +1030,7 @@ document
       <p class="component-description">A working version of push:</p>
 
       <div class="component-example component-example-fullbleed">
-        <header class="bar-title">
+        <header class="bar-nav">
           <h1 class="title">Push</h1>
         </header>
         <div class="content">
@@ -1046,7 +1046,7 @@ document
       </div>
 
 <pre class="prettyprint push-example">
-&lt;header class=&quot;bar-title&quot;&gt;
+&lt;header class=&quot;bar-nav&quot;&gt;
 &lt;h1 class=&quot;title&quot;&gt;Push&lt;/h1&gt;
 &lt;/header&gt;
 &lt;div class=&quot;content&quot;&gt;
@@ -1090,7 +1090,7 @@ window.addEventListener('push', myFunction);
       <ol class="steps">
           <li class="step">
           <h3 class="step-title">1. Fixed bars come first</h3>
-          <p class="step-description">All fixed bars (<code>.bar-title, .bar-tab, .bar-header-secondary, .bar-footer</code>) should always be the first thing in the <code>&lt;body&gt;</code> of the page. This is really important!</p>
+          <p class="step-description">All fixed bars (<code>.bar-nav, .bar-tab, .bar-header-secondary, .bar-footer</code>) should always be the first thing in the <code>&lt;body&gt;</code> of the page. This is really important!</p>
         </li>
         <li class="step">
           <h3 class="step-title">2. Everything else goes in <code>.content</code></h3>
diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss
index 7ce3854..0a8a7b3 100644
--- a/lib/sass/bars.scss
+++ b/lib/sass/bars.scss
@@ -12,7 +12,7 @@
   background-color: $chrome-color;
   box-shadow: 0 0 1px rgba(0,0,0,.85);
 
-  // Modifier class to dock any bar below .bar-title
+  // Modifier class to dock any bar below .bar-nav
   &.bar-header-secondary {
     top: $bar-base-height;
   }
@@ -34,7 +34,7 @@
 // --------------------------------------------------
 
 // Bar docked to top of viewport for showing page title and actions
-.bar-title {
+.bar-nav {
   top: 0;
   display: -webkit-box;
   display: box;
@@ -42,7 +42,7 @@
           box-orient: horizontal;
 }
 
-// Centered text in the .bar-title 
+// Centered text in the .bar-nav 
 .title {
   position: absolute;
   top: 0;
@@ -123,7 +123,7 @@
 // Nav bar in popovers
 // --------------------------------------------------
 
-.popover .bar-title {
+.popover .bar-nav {
   padding-right: 15px;
   padding-left: 15px;
   border-bottom: 1px solid rgba(0,0,0,.15);
diff --git a/lib/sass/base.scss b/lib/sass/base.scss
index c709280..dedb35f 100644
--- a/lib/sass/base.scss
+++ b/lib/sass/base.scss
@@ -60,7 +60,7 @@ strong {
 
 // Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
 // Note: For these to work, content must come after both bars in the markup
-.bar-title ~ .content {
+.bar-nav ~ .content {
   padding-top: 44px;
 }
 .bar-tab ~ .content {
diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss
index 5cb19a1..f3217bd 100644
--- a/lib/sass/buttons.scss
+++ b/lib/sass/buttons.scss
@@ -87,7 +87,7 @@
 // Buttons in nav bars
 // --------------------------------------------------
 
-.bar-title {
+.bar-nav {
 
   // Generic style for all buttons in .bar-title
   [class*="button"] {
diff --git a/lib/sass/segmented-controllers.scss b/lib/sass/segmented-controllers.scss
index 7c82b1b..a052ce0 100644
--- a/lib/sass/segmented-controllers.scss
+++ b/lib/sass/segmented-controllers.scss
@@ -72,7 +72,7 @@
   -webkit-box-flex: 1;
           box-flex: 1;
 }
-.bar-title .segmented-controller {
+.bar-nav .segmented-controller {
   margin-bottom: 4px;
 }
 
diff --git a/lib/sass/theme-classic.scss b/lib/sass/theme-classic.scss
index ca4e47c..d2cf818 100644
--- a/lib/sass/theme-classic.scss
+++ b/lib/sass/theme-classic.scss
@@ -32,7 +32,7 @@ $negative-color: #e71e1e;
     background-color: rgba(245,245,245,.98);
   }
 }
-.bar-title {
+.bar-nav {
   top: 20px;
   box-shadow: 0 -20px 0 rgba(30,176,233,.98), 0 0 1px rgba(0, 0, 0, 0.85)
 }
diff --git a/one.html b/one.html
index 15d17fd..86fc6c8 100644
--- a/one.html
+++ b/one.html
@@ -24,7 +24,7 @@
     <link rel="apple-touch-icon-precomposed" sizes="512x512" href="img/apple-touch-icon-512x512.png">
   </head>
   <body ontouchstart="">
-    <header class="bar-title">
+    <header class="bar-nav">
       <h1 class="title">Push</h1>
     </header>
     <div class="content">
diff --git a/two.html b/two.html
index 1ad5da3..20d2657 100644
--- a/two.html
+++ b/two.html
@@ -24,7 +24,7 @@
     <link rel="apple-touch-icon-precomposed" sizes="512x512" href="img/apple-touch-icon-512x512.png">
   </head>
   <body ontouchstart="">
-    <header class="bar-title">
+    <header class="bar-nav">
       <a class="button-prev" href="one.html" data-transition="slide-out">
         Back
       </a>