diff --git a/app/assets/javascripts/darkswarm/directives/page_alert.js.coffee b/app/assets/javascripts/darkswarm/directives/page_alert.js.coffee
index 659bd227e9..ef3a841d8e 100644
--- a/app/assets/javascripts/darkswarm/directives/page_alert.js.coffee
+++ b/app/assets/javascripts/darkswarm/directives/page_alert.js.coffee
@@ -2,7 +2,7 @@ Darkswarm.directive "ofnPageAlert", ($timeout) ->
   restrict: 'A'
   scope: true
   link: (scope, elem, attrs) ->
-    container_elems = $(".off-canvas-wrap .inner-wrap, .off-canvas-wrap .inner-wrap .fixed, .page-alert")
+    container_elems = $(".off-canvas-wrap .inner-wrap, .off-canvas-wrap .inner-wrap .fixed, .off-canvas-fixed .top-bar, .off-canvas-fixed ofn-flash, .off-canvas-fixed nav.tab-bar, .off-canvas-fixed .page-alert")
 
     # Wait a moment after page load before showing the alert. Otherwise we often miss the
     # start of the animation.
diff --git a/app/assets/stylesheets/darkswarm/page_alert.css.scss b/app/assets/stylesheets/darkswarm/page_alert.css.scss
index 5b7664e70a..59ccf327d0 100644
--- a/app/assets/stylesheets/darkswarm/page_alert.css.scss
+++ b/app/assets/stylesheets/darkswarm/page_alert.css.scss
@@ -2,10 +2,12 @@
 @import "animations";
 @import "compass/css3/transition";
 
+$page-alert-height: 55px;
+
 // Basic style \\
 .page-alert {
   .alert-box {
-    height: 55px;
+    height: $page-alert-height;
     overflow: hidden;
     border: 1px solid rgba($dark-grey, 0.35);
     border-left: none;
@@ -45,33 +47,26 @@
 }
 
 // Show-hide animation \\
-.off-canvas-wrap .inner-wrap, .off-canvas-wrap .inner-wrap .fixed, nav.tab-bar {
+
+.off-canvas-wrap .inner-wrap,
+.off-canvas-fixed .top-bar,
+.off-canvas-fixed ofn-flash,
+.off-canvas-fixed nav.tab-bar,
+.off-canvas-fixed .page-alert {
   @include transition(all 1000ms ease-in-out);
 
   &.move-down {
-    margin-top: 55px;
-
-    @include transition(all 1000ms ease-in-out);
+    margin-top: $page-alert-height;
   }
 }
 
-.off-canvas-wrap .inner-wrap .page-alert.fixed {
-  top: -55px;
-  z-index: 1;
-
-  // TODO: Compass to disable transition
-  -moz-transition: none;
-  -webkit-transition: none;
-  -o-transition: color 0 ease-in;
-  transition: none;
+.off-canvas-wrap .page-alert {
+  top: -1 * $page-alert-height;
+  z-index: 100;
 }
 
 .off-canvas-wrap.move-right .inner-wrap.move-down {
-  .page-alert {
-    top: -55px * 2;
-  }
-
   .left-off-canvas-menu {
-    top: -55px;
+    top: -1 * $page-alert-height;
   }
 }