responsive menu

front-page.php

@@ -11,12 +11,5 @@
     </div>
   </div>
 
-          <?php 
+ 
-              if( have_posts() ) {
-                while( have_posts() ) {
-                  the_post();
-                  the_content();
-                }
-              }
-          ?>
   <?php get_footer() ?>

functions.php

@@ -11,6 +11,7 @@ function slowtwitch_register_styles() {
     wp_enqueue_style('slowtwitch-styles', get_template_directory_uri() . '/style.css', array('slowtwitch-skeleton', 'slowtwitch-normalize'), wp_get_theme()->get('version'), 'all');
     wp_enqueue_style('slowtwitch-skeleton', get_template_directory_uri() . '/assets/css/skeleton.css', array(), '1.0', 'all');
     wp_enqueue_style('slowtwitch-normalize', get_template_directory_uri() . '/assets/css/normalize.css', array(), '1.0', 'all');
+    wp_enqueue_style('slowtwitch-fa', get_template_directory_uri() . '/assets/css/font-awesome.min.css', array(), '1.0', 'all');
 }
 
 add_action( 'init', 'slowtwitch_menus' );

header.php

@@ -21,13 +21,19 @@
 
 <!-- Header html starts here
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+<nav>
+    <div class="main-menu-wrapper">
+        
     <?php
         wp_nav_menu(
             array(
                 'menu' => 'primary',
                 'container' => '',
                 'theme_location' => 'primary',
-                'items_wrap' => '<ul class="test" id="test">%3$s</ul>'
+                'items_wrap' => '<input type="radio" name="slide" id="open-btn"><input type="radio" name="slide" id="cancel-btn"><ul class="nav-links" id="test"><label for="cancel-btn" class="menu-cancel-btn"><i class="fa fa-remove" aria-hidden="true"></i></label>%3$s</ul><label for="open-btn" class="menu-open-btn"><i class="fa fa-bars" aria-hidden="true"></i></label>'
             )
         );
     ?>
+    </div>
+</nav>
+

style.css

@@ -4,3 +4,177 @@
     Version: 1.0.0
 
 */
+
+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
+
+* {
+    font-family: Oswald;
+}
+
+nav {
+    position: fixed;
+    background-color: #0b4fa0;
+    width: 100%;
+    z-index: 999;
+    height: 32px;
+    line-height: 32px;
+}
+
+.main-menu-wrapper {
+    font-size: 15px;
+    text-transform: uppercase;
+    letter-spacing: 1.20px;
+    max-width: 1250px;
+    padding: 0 30px;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.main-menu-wrapper ul {
+    list-style: none;
+}
+
+.main-menu-wrapper .nav-links {
+    display: inline-flex;
+}
+
+.nav-links li a {
+    color: #fff;
+    text-decoration: none;
+    padding: 4px 10px;
+    transition: all 0.3s ease;
+}
+
+.nav-links li a:hover {
+    background-color: #272727;
+}
+
+.nav-links .sub-menu {
+    background-color: #0b4fa0;
+    width: 180px;
+    position: absolute;
+}
+
+.sub-menu li {
+    margin-bottom: 0;
+}
+
+.sub-menu li a {
+    width: 100%;
+    display: block;
+    padding: 7px 0 7px 0;
+    text-align: center;
+    line-height: 32px;
+}
+
+.sub-menu {
+    margin: auto;
+    opacity: 0;
+    visibility: hidden;
+    width: 0;
+    background-color: #272727;
+}
+
+.nav-links li:hover .sub-menu {
+    opacity: 1;
+    visibility: visible;
+}
+
+.menu-cancel-btn {
+    font-size: 20px;
+    cursor: pointer;
+    position: absolute;
+    right: 30px;
+    top: 10px;
+    display: none;
+    color: #fff;
+}
+
+.menu-open-btn {
+    font-size: 20px;
+    cursor: pointer;
+    position: absolute;
+    right: 30px;
+    top: 10px;
+    display: none;
+}
+
+#open-btn {
+    display: none;
+}
+
+#cancel-btn {
+    display: none;
+}
+
+@media screen and (max-width: 940px) {
+    .menu-cancel-btn {
+        display: block;
+    }
+
+    .menu-open-btn {
+        display: block;
+    }
+
+    #open-btn:checked ~ .nav-links{
+        left: 0px;
+    }
+
+    nav {
+        background-color: #fff;
+    }
+
+    .main-menu-wrapper .nav-links {
+        position: fixed;
+        height: 100vh;
+        width: 100%;
+        max-width: 350px;
+        background-color: #0b4fa0;
+        display: block;
+        top: 0;
+        left: 0;
+        overflow-y: auto;
+        line-height: 50px;
+        padding: 50px 10px;
+        box-shadow: 0 15px 15px rgba(0,0,0,0.15);
+        transition: all 0.3s ease;
+        left: -500px;
+    }
+
+    .nav-links li {
+        margin: 15px 10px;
+    }
+
+    .nav-links li {
+        padding: 0 20px;
+        display: block;
+        font-size: 20px;
+    }
+
+    .nav-links .sub-menu {
+        position: static;
+        opacity: 1;
+        visibility: visible;
+        margin-left: 0;
+        top: 65px;
+        width: 100%;
+    }
+
+    .sub-menu li a {
+        text-align: start;
+    }
+
+    .nav-links .sub-menu li {
+        margin: 0;
+    }
+
+    .nav-links .sub-menu li a {
+        font-size: 18px;
+    }
+
+    .nav-links li a:hover {
+        background-color: #0b4fa0;
+    }
+}