diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index e455f297b..36b560fde 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -81,11 +81,11 @@ $(document).ready(function () {
     var windowWidth = $(window).width();
 
     if (windowWidth < compactWidth) {
-      $("body").removeClass("compact").addClass("small");
+      $("body").removeClass("compact-nav").addClass("small-nav");
     } else if (windowWidth < headerWidth) {
-      $("body").addClass("compact").removeClass("small");
+      $("body").addClass("compact-nav").removeClass("small-nav");
     } else {
-      $("body").removeClass("compact").removeClass("small");
+      $("body").removeClass("compact-nav").removeClass("small-nav");
     }
   }
 
@@ -100,13 +100,13 @@ $(document).ready(function () {
       headerWidth = headerWidth + $(e).outerWidth();
     });
 
-    $("body").addClass("compact");
+    $("body").addClass("compact-nav");
 
     $("header").children(":visible").each(function (i, e) {
       compactWidth = compactWidth + $(e).outerWidth();
     });
 
-    $("body").removeClass("compact");
+    $("body").removeClass("compact-nav");
 
     updateHeader();
 
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 5bbaf487c..0cdc2c4bb 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -270,7 +270,7 @@ nav.primary, nav.secondary {
   display: none;
 }
 
-body.compact {
+body.compact-nav {
   #compact-secondary-nav {
     display: inline-block;
   }
diff --git a/app/assets/stylesheets/small.scss b/app/assets/stylesheets/small.scss
index d9e203d95..808b8caa6 100644
--- a/app/assets/stylesheets/small.scss
+++ b/app/assets/stylesheets/small.scss
@@ -2,7 +2,7 @@
 
 /* Styles specific to a small screen, such as iPhone, Android, etc... */
 
-body.small {
+body.small-nav {
   #menu-icon {
     display: inline-block !important;
   }