Add mobile menu to component and stylistic fix

src/components/Header.css

@@ -1,11 +1,10 @@
 .menu_icon [class*='menu_bar-'] {
   background: #000;
-  display: block;
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
   -webkit-transition: 0.2s ease all;
   transition: 0.2s ease all;
-  height: 2px;
+  height: 0.17rem;
   margin-bottom: 0.3rem;
 }
 

src/components/Header.js

@@ -2,6 +2,8 @@ import React from 'react'
 import Link from 'gatsby-link'
 import SaburlyLogo from "../images/Saburly-Logo.svg"
 
+import "./Header.css"
+
 const Header = () => (
   <header>
     <nav className="flex items-center justify-between flex-wrap lg:p-6">
@@ -11,6 +13,12 @@ const Header = () => (
         </Link>
       </div>
 
+      <button className="menu_icon block">
+        <span className="menu_bar-top" />
+        <span className="menu_bar-mid" />
+        <span className="menu_bar-bot" />
+      </button>
+
       <div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-center lg:w-auto">
         <ul className="flex text-sm justify-center lg:flex-grow">
           <Link to="/services">