NN-423 change hamburger menu icon according to Figma design

Author: johnpaulbalagolan

functions.php

@@ -68,4 +68,25 @@ function muse_mime_types($mimes) {
     $mimes['svgz'] = 'image/svg+xml';
     $mimes['webp'] = 'image/webp';
     return $mimes;
-}
+}
+/**
+ * Change hamburger menu icon according to Figma design
+ */
+function custom_render_block_core_navigation (string $block_content, array $block)
+{
+	if (
+		$block['blockName'] === 'core/navigation' && 
+		!is_admin() &&
+		!wp_is_json_request()
+	) {
+		return preg_replace('/\<svg width(.*?)\<\/svg\>/', '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.7998 7.99999C4.7998 7.57565 4.96838 7.16868 5.26843 6.86862C5.56849 6.56857 5.97546 6.39999 6.3998 6.39999H25.5998C26.0242 6.39999 26.4311 6.56857 26.7312 6.86862C27.0312 7.16868 27.1998 7.57565 27.1998 7.99999C27.1998 8.42434 27.0312 8.83131 26.7312 9.13136C26.4311 9.43142 26.0242 9.59999 25.5998 9.59999H6.3998C5.97546 9.59999 5.56849 9.43142 5.26843 9.13136C4.96838 8.83131 4.7998 8.42434 4.7998 7.99999Z" fill="#172836"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.7998 16C4.7998 15.5756 4.96838 15.1687 5.26843 14.8686C5.56849 14.5686 5.97546 14.4 6.3998 14.4H25.5998C26.0242 14.4 26.4311 14.5686 26.7312 14.8686C27.0312 15.1687 27.1998 15.5756 27.1998 16C27.1998 16.4243 27.0312 16.8313 26.7312 17.1314C26.4311 17.4314 26.0242 17.6 25.5998 17.6H6.3998C5.97546 17.6 5.56849 17.4314 5.26843 17.1314C4.96838 16.8313 4.7998 16.4243 4.7998 16Z" fill="#172836"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.3999 24C14.3999 23.5756 14.5685 23.1687 14.8685 22.8686C15.1686 22.5686 15.5756 22.4 15.9999 22.4H25.5999C26.0242 22.4 26.4312 22.5686 26.7313 22.8686C27.0313 23.1687 27.1999 23.5756 27.1999 24C27.1999 24.4243 27.0313 24.8313 26.7313 25.1314C26.4312 25.4314 26.0242 25.6 25.5999 25.6H15.9999C15.5756 25.6 15.1686 25.4314 14.8685 25.1314C14.5685 24.8313 14.3999 24.4243 14.3999 24Z" fill="#172836"/>
+</svg>', $block_content);
+	}
+
+	return $block_content;
+}
+
+add_filter('render_block', 'custom_render_block_core_navigation', null, 2);

style.css

@@ -34,4 +34,35 @@ header .header-navigation ul.wp-block-navigation {
 }
 header .header-navigation ul.wp-block-navigation li.current-menu-item {
     color: var(--wp--preset--color--blue);
+}
+.wp-block-navigation__responsive-container-open:not(.always-shown) {
+    display: none;
+}
+@media screen and (max-width: 1199px) {
+    header .header-navigation {
+        width: auto;
+    }
+    .wp-block-navigation__responsive-container-open {
+        display: flex !important;
+    }
+    .wp-block-navigation__responsive-container-open:not(.always-shown) {
+        display: flex !important;
+    }
+    .wp-block-navigation__responsive-container {
+        display: none;
+    }
+}
+@media (min-width: 600px) and (max-width: 1199px) {
+    .wp-block-navigation__responsive-container-open:not(.always-shown) {
+        display: flex;
+    }
+    .wp-block-navigation__responsive-container {
+        display: none;
+    }
+    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
+        display: none;
+    }
+}
+@media screen and (max-width: 480px) {
+    
 }