add styling for mobile navigation menu

site/layouts/partials/header.html

@@ -1,13 +1,13 @@
 <header class="header">
   <div class="l-underlay body-bg header-bg"></div>
   <div class="l-wrapper">
-    <nav class="nav">
+    <nav class="nav site-nav">
-      <ul class="l-flex-list-row">
+      <ul class="l-flex-list-row site-nav__title">
         <li><a href="{{ .Site.BaseURL }}"><span class="site-title">{{ .Site.Title }}</span></a></li>
       </ul>
-      <label class="c-menu-toggle" for="menu-toggle">Menu</label>
+      <label class="c-menu-toggle site-nav__menu-btn" for="menu-toggle"><span class="site-nav__menu-btn-text menu-text a">Menu</span><span class="menu-icon"></span></label>
       <input id="menu-toggle" class="c-menu-toggle__toggle" type="checkbox">
-      <ul class="l-flex-list-row nav__item c-menu-toggle__menu site-menu">
+      <ul class="l-flex-list-row nav__item c-menu-toggle__menu site-nav__nav-list">
         <li><a class="nav__link nav-link" href="{{ .Site.BaseURL }}">Home</a></li>
         <li><a class="nav__link nav-link" href="#about">About</a></li>
         <li><a class="nav__link nav-link" href="#services">Services</a></li>

src/css/main.css

@@ -65,6 +65,47 @@ html.is-animating .transition-fade {
   }
 }
 
+.site-nav {
+  &__title {
+  }
+
+  &__menu-btn {
+    @media (max-width: $bp-s) {
+      margin: 0;
+      padding: 6px 0 6px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+
+  &__nav-list {
+    @media (max-width: $bp-s) {
+      position: fixed;
+      top: 4rem;
+      bottom: 2rem;
+      left: 2rem;
+      right: 2rem;
+
+      background-color: #fff;
+    }
+  }
+}
+
+.menu-text {
+  margin-right: 0.5rem;
+}
+
+.menu-icon {
+  display: block;
+  height: 1.1em;
+  width: 1.1em;
+
+  border-radius: 3px;
+  background-color: blue;
+  opacity: 0.5;
+}
+
 // footer
 
 .footer {