From fe306ab517cc6f0e00ca688814cee9924709b0d3 Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Sat, 30 Jun 2018 13:59:46 +0200
Subject: [PATCH] Add mobile menu to component  and stylistic fix

---
 src/components/Header.css | 3 +--
 src/components/Header.js  | 8 ++++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/Header.css b/src/components/Header.css
index d0299fd..7d9328b 100644
--- a/src/components/Header.css
+++ b/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;
 }
 
diff --git a/src/components/Header.js b/src/components/Header.js
index a79cff8..23dae7e 100644
--- a/src/components/Header.js
+++ b/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">