Clickable responsive navbar

assets/css/styles.css

@@ -136,7 +136,8 @@ footer {
 /* 4. Navbar */
 
 .nav {
-  @apply hidden flex-col w-full pl-0 my-0 absolute bg-yuika-blue-700;
+  @apply hidden flex-col w-full pl-0 my-0 absolute bg-yuika-blue-700 left-0 right-0;
+  top: 100%;
 }
 .nav li {
   @apply flex flex-row justify-start items-center my-0 py-2 text-white text-sm px-2 h-12 px-4;
@@ -145,10 +146,6 @@ footer {
   @apply align-middle w-full table-cell;
   line-height: 2rem;
 }
-#menushow:hover .nav {
-  @apply block w-screen;
-  right: -1rem;
-}
 
 @screen md {
   .nav {
@@ -157,10 +154,6 @@ footer {
   .nav li {
     @apply object-contain justify-center items-center border-b-0 border-t-0 my-0 inline-block h-full;
   }
-  #menushow:hover .nav {
-    @apply pt-0 right-0;
-    width: initial;
-  }
 }
 
 .nav-fixed {

assets/js/nav-menu.js

@@ -0,0 +1,17 @@
+
+$("#menushow").click(function() {
+  if($('.nav').css('display') == 'none') {
+    $(".nav").show();
+  } else {
+    $(".nav").hide();
+  }
+});
+
+$(window).resize(function() {
+  var wi = $(window).width();
+  if(wi >= 768) {
+    $(".nav").show();
+  } else {
+    $(".nav").hide();
+  }
+});

partials/site-header.hbs

@@ -1,5 +1,5 @@
   <div class="w-full flex flex-row justify-begin items-center fixed index-navbar">
-    <header class="flex flex-row py-2 flex-wrap w-full">
+    <header class="flex flex-row py-2 w-full relative">
       {{#if @site.logo}}
       <div class="w-12 h-12">
         <img src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" class="w-full h-full object-contain">
@@ -17,7 +17,7 @@
       </div>
       <div id="menushow" class="cursor-pointer relative">
         <img src="{{asset "images/menu.svg"}}" class="h-12 w-12 px-3 py-3 text-white md:hidden" style="filter: invert(1);" alt="menu"/>
-        {{navigation}}
       </div>
+     {{navigation}}
     </header>
   </div>