sets up mobiile nav styles

diff --git a/docs/assets/img/icons/menu-grey.png b/docs/assets/img/icons/menu-grey.png
new file mode 100644 (file)
index 0000000..41be1ae
Binary files /dev/null and b/docs/assets/img/icons/menu-grey.png differ

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 2c9eb8370e46f64674e5d9de1c2be20d5debeeee..e1685aa9d2f9f37ea88ef6c71154849963fe515c 100644 (file)
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -100,6 +100,7 @@ a#notice {
   }
 }
 /* COUNTDOWN END */
+
 $transition-slow: all 0.5s ease-in-out;
 $transition: all 0.25s ease-in-out;
 $transition-fast: all 0.15s ease-in-out;
@@ -110,12 +111,12 @@ $global-nav-hover-color: lighten($global-nav-bg, 10%);
 
 .global-nav {
   background: $global-nav-bg !important;
-  display: flex;
   font-size: rem-calc(13);
   font-weight: bold;
   height: rem-calc(45);
   justify-content: space-between;
   position: relative;
+  display: none;
 
   .dropdown {
     width: auto;
@@ -133,6 +134,12 @@ $global-nav-hover-color: lighten($global-nav-bg, 10%);
     }
   }
 
+  &.show-for-smedium {
+    @media screen and (min-width: 775px) {
+      display: flex;
+    }
+  }
+
   .dropdown.menu > li.is-dropdown-submenu-parent > a {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -259,6 +266,41 @@ $global-nav-hover-color: lighten($global-nav-bg, 10%);
   }
 }
 
+// --- Mobile Top Bar
+.global-nav-mobile-wrapper {
+  background: $global-nav-bg;
+  position: relative;
+
+  @media screen and (min-width: 775px) {
+    display: none;
+  }
+
+  .global-nav-mobile {
+    .global-nav-title {
+      margin-left: 1.5rem;
+    }
+  }
+
+  // hamburger-menu
+
+  .hamburger-icon {
+    @include vertical-center;
+    height: 12px;
+    left: 10px;
+  }
+
+  // zurb logo
+  .title-bar-title {
+    img {
+      @include vertical-center;
+      height: 14px;
+      left: 2.25rem;
+      opacity: 0.9;
+      width: 76px;
+    }
+  }
+}
+
 
 .docs-newsletter {
   padding: 1rem 0;

diff --git a/docs/partials/mobile-navigation.html b/docs/partials/mobile-navigation.html
index 39bea534a8f9b42cf873d2b71d1ed95e42cc1de8..4e68dd10a114c44e0812def2f0d7df71bcb49088 100644 (file)
--- a/docs/partials/mobile-navigation.html
+++ b/docs/partials/mobile-navigation.html
@@ -1,6 +1,10 @@
-<div class="title-bar hide-for-medium">
-  <div class="title-bar-left">
-    <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
-    <span class="title-bar-title">Foundation</span>
-  </div>
+<div class="global-nav-mobile-wrapper hide-for-smedium-up">
+  <button type="button" data-toggle="offCanvas">
+    <div class="global-nav-mobile">
+      <img class="hamburger-icon" alt="Menu icon" src="{{root}}assets/img/icons/menu-grey.png">
+      <div class="global-nav-title">
+        <a class="zurb-logo" href="http://foundation.zurb.com/index.html">ZURB <strong>Foundation</strong></a>
+      </div>
+    </div>
+  </button>
 </div>

diff --git a/docs/partials/navigation.html b/docs/partials/navigation.html
index ef4c07a4f27fb01696d74499290daab4ef77fced..d8db7a775a59e19d12a5b7a1738af425b6bf1d3d 100644 (file)
--- a/docs/partials/navigation.html
+++ b/docs/partials/navigation.html
@@ -1,4 +1,4 @@
-<nav class="global-nav show-for-medium">
+<nav class="global-nav show-for-smedium">
 
   <div class="global-nav-title">
     <a class="zurb-logo" href="http://foundation.zurb.com/index.html">ZURB <strong>Foundation</strong></a>