Basic hamburger menu on mobile

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',

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>

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
 */