diff --git a/ionic/components/nav-bar/nav-bar.scss b/ionic/components/nav-bar/nav-bar.scss
index 6475240fd7..f7ed0ea488 100644
--- a/ionic/components/nav-bar/nav-bar.scss
+++ b/ionic/components/nav-bar/nav-bar.scss
@@ -36,6 +36,7 @@
   align-items: center;
 }
 
+
 // Core Nav Bar Color Generation
 // --------------------------------------------------
 
@@ -54,3 +55,7 @@
   }
 
 }
+
+.transparent-navbar.navbar {
+  background-color: transparent;
+}
diff --git a/ionic/transitions/ios-transition.ts b/ionic/transitions/ios-transition.ts
index 7c910ed458..5a9977ceb4 100644
--- a/ionic/transitions/ios-transition.ts
+++ b/ionic/transitions/ios-transition.ts
@@ -54,6 +54,10 @@ class IOSTransition extends Transition {
       this.enteringTitle
         .from(TRANSLATEX, OFF_LEFT);
 
+      this.leavingNavbar
+        .before.addClass('transparent-navbar')
+        .after.removeClass('transparent-navbar');
+
       this.leavingView
         .to(TRANSLATEX, OFF_RIGHT)
         .to(OPACITY, 1);
@@ -74,6 +78,10 @@ class IOSTransition extends Transition {
         .from(TRANSLATEX, OFF_RIGHT)
         .from(OPACITY, 1);
 
+      this.enteringNavbar
+        .before.addClass('transparent-navbar')
+        .after.removeClass('transparent-navbar');
+
       this.enteringTitle
         .from(TRANSLATEX, OFF_RIGHT);
 
diff --git a/ionic/transitions/md-transition.ts b/ionic/transitions/md-transition.ts
index 7c80d1c131..fe59bde8e2 100644
--- a/ionic/transitions/md-transition.ts
+++ b/ionic/transitions/md-transition.ts
@@ -42,6 +42,10 @@ class MaterialTransition extends Transition {
       this.enteringView
         .from(TRANSLATEY, CENTER);
 
+      this.leavingNavbar
+        .before.addClass('transparent-navbar')
+        .after.removeClass('transparent-navbar');
+
       this.leavingTitle
         .fadeOut();
 
@@ -62,6 +66,10 @@ class MaterialTransition extends Transition {
         .from(TRANSLATEY, OFF_BOTTOM)
         .fadeIn();
 
+      this.enteringNavbar
+        .before.addClass('transparent-navbar')
+        .after.removeClass('transparent-navbar');
+
       if (this.entering.enableBack()) {
         let enteringBackButtonText = new Animation(this.entering.backButtonTextElement());
         enteringBackButtonText.fadeIn();