From 2bade2d51ea07166d7d76e8843968f4bd00ef34b Mon Sep 17 00:00:00 2001
From: Jeremy Dormitzer <jeremy.dormitzer@gmail.com>
Date: Fri, 27 Jul 2018 15:56:38 -0400
Subject: [PATCH] Basic hamburger menu on mobile

---
 header.php     |  6 +++++-
 icons/menu.svg |  4 ++++
 style.css      | 11 +++++++++++
 3 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 icons/menu.svg

diff --git a/header.php b/header.php
index cd6377e..45e4fea 100644
--- a/header.php
+++ b/header.php
@@ -41,7 +41,11 @@
 		</div><!-- .site-branding -->
 
 		<nav id="site-navigation" class="main-navigation">
-			<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'jeremy-wordpress-theme' ); ?></button>
+			<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
+                <img class="icon"
+                     src="<?php echo get_template_directory_uri() . '/icons/menu.svg'?>"
+                     alt="menu">
+            </button>
 			<?php
 			wp_nav_menu( array(
 				'theme_location' => 'menu-1',
diff --git a/icons/menu.svg b/icons/menu.svg
new file mode 100644
index 0000000..b65f05f
--- /dev/null
+++ b/icons/menu.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 7a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1zm0 5a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1zm1 4a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2H5z" fill="#0C0C0D" fill-opacity=".8"></path></svg>
\ No newline at end of file
diff --git a/style.css b/style.css
index a9d7a9d..eae391a 100644
--- a/style.css
+++ b/style.css
@@ -946,6 +946,17 @@ Site header
     margin-right: 4px;
 }
 
+button.menu-toggle {
+    width: 50px;
+    height: 50px;
+    padding: 0px;
+}
+
+button.menu-toggle img {
+    width: 100%;
+    height: 100%;
+}
+
 /*
 Site content
 */