Add background to nav button

rolfbuford · Jun 15, 2014 · b5419b1 · b5419b1
1 parent 3a91faa
commit b5419b1
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb
@@ -42,8 +42,10 @@ under the License.
 
   <body class="<%= page_classes %>">
     <a href="#" id="nav-button">
-      <%= image_tag('navbar.png') %>
-      <span>NAV</span>
+      <span>
+        NAV
+        <%= image_tag('navbar.png') %>
+      </span>
     </a>
     <div class="tocify-wrapper">
       <%= image_tag "logo.png" %>

diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss
@@ -197,12 +197,20 @@ html, body {
 
 // button to show navigation on mobile devices
 #nav-button {
+  span {
+    display: block;
+    $side-pad: $main-padding / 2 - 8px;
+    padding: $side-pad $side-pad $side-pad;
+    background-color: rgba($main-bg, 0.7);
+    @include transform-origin(0, 0);
+    @include transform(rotate(-90deg) translate(-100%, 0));
+    border-radius: 0 0 0 5px;
+  }
+  padding: 0 1.5em 5em 0; // increase touch size area
   display: none;
   position: fixed;
   top: 0;
   left: 0;
-  $side-pad: $main-padding / 2 - 8px;
-  padding: $side-pad 1.5em 5em $side-pad; // increase touch area size
   z-index: 100;
   color: #000;
   text-decoration: none;
@@ -211,13 +219,7 @@ html, body {
   line-height: 16px;
   img {
     height: 16px;
-  }
-  span {
-    position: absolute;
-    top: 35px;
-    left: 1px;
-    line-height: 1;
-    @include transform(rotate(-90deg));
+    vertical-align: bottom;
   }
 
   @include transition(left ease-in-out 0.3s);