✨ Add a responsive mobile navigation menu.

assets/css/_common/_core/layout.scss

@@ -16,9 +16,10 @@
       max-width: 1200px;
       text-align: center;
       margin: 0 auto;
+      display: flex;
+      justify-content: space-between; 
     }
   }
-
   
   .main {
     flex: 1 0 auto;
@@ -33,6 +34,7 @@
     width: 100%;
     text-align: center;
     line-height: 4rem;
+    padding-top: 2em;
   }
   
   

assets/css/_common/_core/media.scss

@@ -1,27 +1,143 @@
-@media (max-width: 767px) {
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
+    .navbar {
+        display: none;
+    }
 
-    .archive-item-date{
+    .navbar-mobile {
-      display: none;
+        display: block !important;
+        position: fixed;
+        width: 100%;
+        z-index: 100;
+        transition: all 0.6s ease 0s;
+        .container {
+            padding: 0;
+            margin: 0;
+            height: 5em;
+            line-height: 5.5em;
+            background: #ffffff;
+            .navbar-header {
+                width: 100%;
+                padding-right: 1em;
+                padding-left: 1em;
+                box-sizing: border-box;
+                .menu-toggle {
+
+                    float: right;
+                    cursor: pointer;
+                    height: 5em;
+                    line-height: 5.5em;
+
+                    span {
+                        display: block;
+                        background: #000;
+                        width: 36px;
+                        height: 2px;
+                        -webkit-border-radius: 3px;
+                        -moz-border-radius: 3px;
+                        border-radius: 3px;
+                        -webkit-transition: .25s margin .25s, .25s transform;
+                        -moz-transition: .25s margin .25s, .25s transform;
+                        transition: .25s margin .25s, .25s transform;
+                    }
+
+                    span:nth-child(1) {
+                        margin-bottom: 8px;
+                    }
+                    span:nth-child(3) {
+                        margin-top: 8px;
+                    }
+
+                    &.active {
+                        span {
+                            -webkit-transition: .25s margin, .25s transform .25s;
+                            -moz-transition: .25s margin, .25s transform .25s;
+                            transition: .25s margin, .25s transform .25s;
+                        }
+                        span:nth-child(1) {
+                            -moz-transform: rotate(45deg) translate(4px, 6px);
+                            -ms-transform: rotate(45deg) translate(4px, 6px);
+                            -webkit-transform: rotate(45deg) translate(4px, 6px);
+                            transform: rotate(45deg) translate(4px, 6px);
+                        }
+
+                        span:nth-child(2) {
+                            opacity: 0
+                        }
+
+                        span:nth-child(3) {
+                            -moz-transform: rotate(-45deg) translate(8px, -10px);
+                            -ms-transform: rotate(-45deg) translate(8px, -10px);
+                            -webkit-transform: rotate(-45deg) translate(8px, -10px);
+                            transform: rotate(-45deg) translate(8px, -10px);
+                        }
+                    }
+                }
+            }
+
+            .menu {
+                text-align: center;
+                background: #ffffff;
+                border-top: 2px solid #000000;
+                padding-top: 1em;
+                padding-bottom: 1em;
+                display: none;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1);
+                a {
+                    display: block;
+                    line-height: 2.5em;
+                }
+
+                &.active {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    #dynamic-to-top {
+        display: none !important;
     }
     .footer {
-      height: 3rem;
+        height: 3rem;
-      width: 100%;
+        width: 100%;
-      text-align: center;
+        text-align: center;
-      line-height: 1.5rem;
+        line-height: 1.5rem;
-    }
+        padding-top: 2em;
-
-    #dynamic-to-top{
-        bottom: 3em;
-        right: 4em;
     }
 
     .post-warp {
-       .categories-card {
+        padding-top: 6em;
-         .card-item {
+        .archive-item-date {
-          width: 95%;
+            display: none;
-         }
+        }
-       }
+        .categories-card {
+            .card-item {
+                width: 95%;
+            }
+        }
     }
 }
 
 
+
+/* iPads (portrait and landscape) ----------- */
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}
+
+
+
+/* Desktops and laptops ----------- */
+
+@media only screen and (min-width: 1224px) {
+    .navbar-mobile {
+        display: none;
+    }
+}
+
+
+
+/* Large screens ----------- */
+
+@media only screen and (min-width: 1824px) {
+    /* Styles */
+}

assets/css/_common/_section/navbar.scss

@@ -1,7 +1,5 @@
   
-  .navbar-header {
+
-    float: left;
-  }
 
   .header-logo a{
     padding: 0 ;
@@ -11,10 +9,6 @@
     }
   }
   
-  .navbar-right {
-    float: right !important;
-    margin-right: -15px;
-  }
   
  .navbar .menu a {
    

assets/js/main.js

@@ -29,6 +29,16 @@ _Blog.toggleTheme = function() {
     })
 }
 
+_Blog.toggleMobileMenu = function(){
+    const menuToggle = document.querySelector('.menu-toggle')
+    const mobileMenu = document.querySelector('#mobile-menu')
+    menuToggle.addEventListener('click', () => {
+        mobileMenu.classList.toggle('active')
+        menuToggle.classList.toggle('active')
+    })
+}
+
 _Blog.toggleTheme()
 _Blog.changeTitle()
+_Blog.toggleMobileMenu()
 }());

layouts/partials/header.html

@@ -10,4 +10,21 @@
                 {{ end }}
         </div>
     </div>
+</nav>
+<nav class="navbar-mobile" id="nav-mobile" style="display: none">
+     <div class="container">
+        <div class="navbar-header">
+            <a href="{{ "/" | absURL}}">LiuZhichao</a>
+            <button class="menu-toggle">
+                <span></span><span></span><span></span>
+            </button>
+        </div>
+     
+          <div class="menu" id="mobile-menu">
+                {{ $currentPage := . }}
+                {{ range .Site.Menus.main }}
+                <a class="menu-item{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
+                {{ end }}
+        </div>
+    </div>
 </nav>