additional updates

wp-content/themes/kolarix-q_movies/css/header.scss

@@ -25,4 +25,68 @@
     &:hover {
         text-decoration: none;
     }
+}
+
+.menu {
+    @media screen and (max-width: 990px) {
+        display: none;
+        position: absolute;
+        top: calc(var(--gap) * 2);
+        left: var(--gap);
+        width: calc(100% - var(--gap) * 2);
+        background: #ffffff;
+        padding: var(--gap);
+        text-align: center;
+        border-radius: 5px;
+        -webkit-box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.2);
+    }
+
+    &-item {
+        display: block;
+
+        @media screen and (min-width: 991px) {
+            display: inline-block;
+        }
+
+        &:not(:last-child) {
+            @media screen and (max-width: 990px) {
+                margin-bottom: var(--gap);
+            }
+
+            @media screen and (min-width: 991px) {
+                margin-right: var(--gap);
+            }
+        }
+
+        a {
+            font-family: "BarlowCondensed-Bold", sans-serif;
+            letter-spacing: 2px;
+        }
+    }
+}
+
+.mobile-nav {
+    width: 32px;
+    height: 32px;
+    background-image: url("images/icon-hamburger.svg");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    cursor: pointer;
+    -webkit-transition: background-image 0.3s ease;
+    -o-transition: background-image 0.3s ease;
+    transition: background-image 0.3s ease;
+
+    &.active {
+        background-image: url("images/icon-close.svg");
+        background-size: contain;
+        -webkit-transition: background-image 0.3s ease;
+        -o-transition: background-image 0.3s ease;
+        transition: background-image 0.3s ease;
+    }
+
+    @media screen and (min-width: 991px) {
+        display: none;
+    }
 }

wp-content/themes/kolarix-q_movies/functions.php

@@ -22,7 +22,8 @@ function q_movies_setup() {
      * Enqueue styles and scripts.
      */
 	add_action( 'wp_enqueue_scripts', 'q_movies_enqueue_styles' );
-    wp_enqueue_script( 'q_movies-script', get_template_directory_uri() . '/js/theme.js', array('jquery'), '1.0.0', true );
+    wp_enqueue_script( 'qss-connect-script', get_template_directory_uri() . '/js/qss-connect.js', array('jquery'), '1.0.0', true );
+	wp_enqueue_script( 'navigation-script', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '1.0.0', true );
 
     /**
      * Add favicon.

wp-content/themes/kolarix-q_movies/header.php

@@ -10,5 +10,12 @@
 <header class="header">
     <div class="header-wrapper wrapper swing-in-top-fwd">
         <a href="<?php echo get_home_url(); ?>" class="logo-wrapper swing-in-top-fwd delay_01"> <span class="tag">Q</span>Movies</a>
+        <nav class="navigation fade-in-fwd delay_02">
+            <div class="mobile-nav"></div>
+            <?php wp_nav_menu( array(
+                'theme_location' => 'primary',
+                'container' => false
+            ) ); ?>
+        </nav>
     </div>
 </header>

wp-content/themes/kolarix-q_movies/js/navigation.js

@@ -0,0 +1,45 @@
+(function( $ ) {
+    'use strict';
+
+// Mobile navigation toggle
+
+    let toggleMobileNav = function() {
+        let menu = $('.menu'),
+            mobileNav = $('.mobile-nav'),
+            menuOpen = false;
+
+        // Check if .mobile-nav is visible
+        if (mobileNav.is(':visible')) {
+            mobileNav.click(function() {
+                if (!menuOpen) {
+                    menu.slideDown();
+                    menuOpen = true;
+                    mobileNav.addClass('active');
+                } else {
+                    menu.slideUp();
+                    menuOpen = false;
+                    mobileNav.removeClass('active');
+                }
+            });
+
+            $(document).click(function(event) {
+                if (!$(event.target).closest(menu).length && !$(event.target).closest(mobileNav).length && mobileNav.is(':visible')) {
+                    if (menuOpen) {
+                        menu.slideUp();
+                        menuOpen = false;
+                        mobileNav.removeClass('active');
+                    }
+                }
+            });
+        } else {
+            menu.show();
+            mobileNav.off("click");
+            $(document).off("click", "**");
+        }
+    };
+
+    toggleMobileNav();
+    $(window).resize(toggleMobileNav);
+
+
+})( jQuery );

wp-content/themes/kolarix-q_movies/style.css

@@ -28,6 +28,55 @@ Version: 1.1.0
   .logo-wrapper:hover {
     text-decoration: none; }
 
+@media screen and (max-width: 990px) {
+  .menu {
+    display: none;
+    position: absolute;
+    top: calc(var(--gap) * 2);
+    left: var(--gap);
+    width: calc(100% - var(--gap) * 2);
+    background: #ffffff;
+    padding: var(--gap);
+    text-align: center;
+    border-radius: 5px;
+    -webkit-box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.2); } }
+.menu-item {
+  display: block; }
+  @media screen and (min-width: 991px) {
+    .menu-item {
+      display: inline-block; } }
+  @media screen and (max-width: 990px) {
+    .menu-item:not(:last-child) {
+      margin-bottom: var(--gap); } }
+  @media screen and (min-width: 991px) {
+    .menu-item:not(:last-child) {
+      margin-right: var(--gap); } }
+  .menu-item a {
+    font-family: "BarlowCondensed-Bold", sans-serif;
+    letter-spacing: 2px; }
+
+.mobile-nav {
+  width: 32px;
+  height: 32px;
+  background-image: url("images/icon-hamburger.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  cursor: pointer;
+  -webkit-transition: background-image 0.3s ease;
+  -o-transition: background-image 0.3s ease;
+  transition: background-image 0.3s ease; }
+  .mobile-nav.active {
+    background-image: url("images/icon-close.svg");
+    background-size: contain;
+    -webkit-transition: background-image 0.3s ease;
+    -o-transition: background-image 0.3s ease;
+    transition: background-image 0.3s ease; }
+  @media screen and (min-width: 991px) {
+    .mobile-nav {
+      display: none; } }
+
 #main {
   display: flex;
   height: 100%; }

wp-content/themes/kolarix-q_movies/style.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "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",
+"mappings": "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",
 "sources": ["style.scss","css/header.scss","css/main.scss"],
 "names": [],
 "file": "style.css"