diff --git a/css/betternavigator.css b/css/betternavigator.css
index 47a2ccc..4cefb6f 100644
--- a/css/betternavigator.css
+++ b/css/betternavigator.css
@@ -47,10 +47,10 @@ span[class^='bn-icon'], span[class*=' bn-icon'] { display: inline-block; }
 .better-navigator__status .bn-icon-cog, .better-navigator__status .bn-icon-close { opacity: .7; }
 .better-navigator__status:hover { background: dimgray; }
 .better-navigator__status:hover .bn-icon-cog, .better-navigator__status:hover .bn-icon-close { opacity: 1; }
-.better-navigator__status.live { background: #39b54a; border-color: #33a343; }
-.better-navigator__status.live:hover { background: #36ac46; }
-.better-navigator__status.draft { background: #f26c4f; border-color: #da6147; }
-.better-navigator__status.draft:hover { background: #e6674b; }
+.live .better-navigator__status { background: #39b54a; border-color: #33a343; }
+.live .better-navigator__status:hover { background: #36ac46; }
+.draft .better-navigator__status { background: #f26c4f; border-color: #da6147; }
+.draft .better-navigator__status:hover { background: #e6674b; }
 
 .better-navigator__content { padding: 6px; color: #71767a; background: #cfd8de; border: 1px solid #bac2c8; border-width: 0 0 1px 1px; }
 .better-navigator__content .bn-heading { text-align: center; text-transform: uppercase; font-size: 11px; margin: 8px 0 4px 0; }
diff --git a/scss/betternavigator.scss b/scss/betternavigator.scss
index 1aa2c52..9258b6d 100644
--- a/scss/betternavigator.scss
+++ b/scss/betternavigator.scss
@@ -130,7 +130,7 @@ $archiveColor: #6f6f6f;
         }
     }
 
-    &.live {
+    .live & {
         background: $liveColor;
         border-color: shade($liveColor, 10);
 
@@ -139,7 +139,7 @@ $archiveColor: #6f6f6f;
         }
     }
 
-    &.draft {
+    .draft & {
         background: $stageColor;
         border-color: shade($stageColor, 10);
 
diff --git a/src/Extension/BetterNavigatorExtension.php b/src/Extension/BetterNavigatorExtension.php
index f47343d..7515ed2 100644
--- a/src/Extension/BetterNavigatorExtension.php
+++ b/src/Extension/BetterNavigatorExtension.php
@@ -130,7 +130,7 @@ class BetterNavigatorExtension extends DataExtension
         $bNData = array_merge($nav, [
             'Member' => $member,
             'Stage' => Versioned::get_stage(),
-            'CssClasses' => $this->cssClasses($viewing),
+            'CssClass' => $this->cssClass($viewing),
             'ViewingTitle' => $viewingTitle,
             'LoginLink' => Controller::join_links(Director::absoluteBaseURL(), Security::config()->login_url, $backURL),
             'LogoutLink' => Controller::join_links(Director::absoluteBaseURL() . Security::config()->logout_url, $backURL),
@@ -184,9 +184,10 @@ class BetterNavigatorExtension extends DataExtension
 
     /**
      * @param string $viewing
+     *
      * @return string
      */
-    private function cssClasses($viewing) {
+    private function cssClass($viewing) {
         $classes = strtolower($viewing);
 
         $position = Config::inst()->get('BetterNavigator', 'position');
diff --git a/templates/BetterNavigator/BetterNavigator.ss b/templates/BetterNavigator/BetterNavigator.ss
index 55dafbc..283da1f 100644
--- a/templates/BetterNavigator/BetterNavigator.ss
+++ b/templates/BetterNavigator/BetterNavigator.ss
@@ -1,6 +1,6 @@
-<div id="BetterNavigator" class="better-navigator collapsed">
+<div id="BetterNavigator" class="better-navigator collapsed $CssClass">
 
-    <div id="BetterNavigatorStatus" class="better-navigator__status $CssClasses">
+    <div id="BetterNavigatorStatus" class="better-navigator__status">
         <span class="bn-icon-cog"></span>
         $ViewingTitle
         <span class="bn-icon-close"></span>