diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb
index c5d41ae..1e8f395 100644
--- a/source/layouts/layout.erb
+++ b/source/layouts/layout.erb
@@ -42,8 +42,10 @@ under the License.
- <%= image_tag('navbar.png') %>
- NAV
+
+ NAV
+ <%= image_tag('navbar.png') %>
+
<%= image_tag "logo.png" %>
diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss
index 32d2834..23873d7 100644
--- 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);