diff --git a/scss/_bar.scss b/scss/_bar.scss
index 9fc2370205..7177c7f871 100644
--- a/scss/_bar.scss
+++ b/scss/_bar.scss
@@ -237,6 +237,10 @@
   .buttons.right-buttons {
     display: inherit;
   }
+  .buttons span {
+    display: inline-flex;
+  }
+
   // Place the last button in a bar on the right of the bar
   .title + .button:last-child,
   > .button + .button:last-child,
diff --git a/test/css/headers.html b/test/css/headers.html
index 5395b8c6c4..e6f6900410 100644
--- a/test/css/headers.html
+++ b/test/css/headers.html
@@ -35,10 +35,10 @@
         </a>
       </div>
 
-      <header class="bar bar-header bar-positive">
+      <header class="bar bar-header bar-light">
         <a class="button icon ion-navicon"> Home</a>
         <div class="button-bar">
-          <a class="button button-calm">First</a>
+          <a class="button button-positive">First</a>
           <a class="button">Second</a>
           <a class="button">Third</a>
         </div>
@@ -47,22 +47,10 @@
         </a>
       </header>
 
-      <header class="bar bar-header bar-royal">
-        <a class="button button-clear icon ion-ios7-alarm"> Back</a>
-        <div class="button-bar">
-          <a class="button button-calm">First</a>
-          <a class="button">Second</a>
-          <a class="button">Third</a>
-        </div>
-        <a class="button">
-          <i class="icon ion-star"></i> Favorites
-        </a>
-      </header>
-
-      <header class="bar bar-header bar-positive">
+      <header class="bar bar-header bar-stable">
         <a class="button button-clear icon ion-ios7-arrow-back"> Back</a>
         <div class="button-bar">
-          <a class="button button-calm">First</a>
+          <a class="button button-dark">First</a>
           <a class="button">Second</a>
           <a class="button">Third</a>
         </div>
@@ -71,7 +59,7 @@
         </a>
       </header>
 
-      <div class="bar bar-header bar-calm">
+      <div class="bar bar-header bar-positive">
         <a class="button button-icon icon ion-home"></a>
         <div class="button-bar">
           <a href="#" class="button button-clear">Edit</a>
@@ -83,30 +71,6 @@
         </a>
       </div>
 
-      <header class="bar bar-dark">
-        <a class="button icon ion-home"></a>
-        <div class="button-bar">
-          <a class="button">First</a>
-          <a class="button">Second</a>
-          <a class="button">Third</a>
-        </div>
-        <a class="button">
-          <i class="icon ion-star"></i>
-        </a>
-      </header>
-
-      <header class="bar bar-positive">
-        <a class="button icon ion-home"></a>
-        <div class="button-bar">
-          <a class="button">First</a>
-          <a class="button">Second</a>
-          <a class="button">Third</a>
-        </div>
-        <a class="button">
-          <i class="icon ion-star"></i>
-        </a>
-      </header>
-
       <header class="bar bar-calm">
         <a class="button icon ion-home"></a>
         <div class="button-bar">
@@ -132,42 +96,6 @@
       </header>
 
       <header class="bar bar-balanced">
-        <a class="button icon ion-home"></a>
-        <div class="button-bar">
-          <a class="button">First</a>
-          <a class="button">Second</a>
-          <a class="button">Third</a>
-        </div>
-        <a class="button">
-          <i class="icon ion-star"></i>
-        </a>
-      </header>
-
-      <header class="bar bar-energized">
-        <a class="button icon ion-home"></a>
-        <div class="button-bar">
-          <a class="button">First</a>
-          <a class="button">Second</a>
-          <a class="button">Third</a>
-        </div>
-        <a class="button">
-          <i class="icon ion-star"></i>
-        </a>
-      </header>
-
-      <header class="bar bar-royal">
-        <a class="button icon ion-home"></a>
-        <div class="button-bar">
-          <a class="button">First</a>
-          <a class="button">Second</a>
-          <a class="button">Third</a>
-        </div>
-        <a class="button">
-          <i class="icon ion-star"></i>
-        </a>
-      </header>
-
-      <header class="bar bar-light">
         <a class="button icon ion-arrow-left-c"></a>
         <div class="button-bar">
           <a class="button">First</a>
@@ -179,7 +107,7 @@
         </a>
       </header>
 
-      <header class="bar bar-assertive">
+      <header class="bar bar-energized">
         <a class="button button-icon icon ion-arrow-left-c"></a>
         <div class="button-bar">
           <a class="button">First</a>
@@ -191,11 +119,27 @@
         </a>
       </header>
 
-      <header class="bar bar-header bar-stable">
+      <header class="bar bar-header bar-royal">
         <button class="button button-clear button-icon ion-ios7-arrow-back"> Back</button>
         <h1 class="title">Title here</h1>
       </header>
 
+      <header class="bar bar-header bar-dark nav-bar nav-title-slide-ios7">
+        <div class="buttons left-buttons">
+          <span>
+            <button class="button button-icon ion-ios7-world-outline"></button>
+            <button class="button button-icon ion-ios7-world-outline"></button>
+          </span>
+        </div>
+        <h1 class="title">Two Buttons</h1>
+        <div class="buttons right-buttons">
+          <span>
+            <button class="button button-icon ion-ios7-world-outline"></button>
+            <button class="button button-icon ion-ios7-world-outline"></button>
+          </span>
+        </div>
+      </header>
+
     </ion-content>
 
   </body>