Added responsive nav-bar

databasedIISc · Feb 24, 2024 · b453e53 · b453e53
1 parent 3ad75ff
commit b453e53
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 11 deletions.
diff --git a/css/common.css b/css/common.css
@@ -14,6 +14,10 @@ body {
     margin: 0;
 }
 
+.no-display {
+    display: none !important;
+}
+
 /* Header */
 .header-container {
     position: absolute;
@@ -23,7 +27,7 @@ body {
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    height: 12vh;
+    height: 94px;
     background-color: #fff;
     border-bottom: 3px solid rgb(61, 77, 173);
 }
@@ -57,6 +61,65 @@ body {
     color: rgb(61, 77, 173);
 }
 
+.header-mob-nav-btn {
+    display: none;
+    width: 35px;
+    height: calc(60px - 12.5px);
+    padding-top: 10px;
+    cursor: pointer;
+    margin-right: 20px;
+}
+
+.header-mob-nav-btn span {
+    display: block;
+    width: 100%;
+    height: 5px;
+    background-color: black;
+    margin: 5px 0;
+}
+
+.header-mob-nav {
+    position: fixed;
+    top: 94px;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    padding: 50px;
+    box-sizing: border-box;
+
+    background-color: #000000b0;
+    font-size: 32px;
+    color: white;
+    font-family: Arial, Helvetica, sans-serif;
+    text-align: center;
+
+    display: flex;
+    flex-direction: column;
+}
+
+.header-mob-nav a {
+    margin: 15px 0;
+    text-shadow: 5px 5px 10px black;
+}
+
+.header-mob-nav a.active {
+    color: rgb(61, 77, 173);
+}
+
+@media screen and (max-width: 850px) {
+    .header-nav {
+        display: none;
+    }
+
+    .header-container {
+        position: fixed;
+    }
+
+    .header-mob-nav-btn {
+        display: inline-block;
+    }
+}
+
 .main {
     margin-top: 94px;
 }
@@ -98,12 +161,6 @@ body {
     color: rgb(61, 77, 173);
 }
 
-@media screen and (max-width: 800px) {
-    .header-nav {
-        display: none;
-    }
-}
-
 @keyframes fadeIn {
     from {
         opacity: 0;

diff --git a/scripts/activepage.js b/scripts/activepage.js
@@ -1,4 +1,5 @@
 console.log(window.location.pathname);
 document.addEventListener("DOMContentLoaded", () => {
   document.querySelector(`a.header-nav-item[href="${window.location.pathname}"`).classList.add("active");
+  document.querySelector(`header-mob-nav a[href="${window.location.pathname}"`).classList.add("active");
 });
diff --git a/scripts/header.js b/scripts/header.js
@@ -12,10 +12,23 @@ const headerContent= `
         <a class="header-nav-item" href="${origin}/activities/">Activities</a>
         <a class="header-nav-item" href="${origin}/contact/">Contact</a>
     </div>
-</div>
-`;
 
+    <div class="header-mob-nav-btn">
+        <span></span>
+        <span></span>
+        <span></span>
+        <p style="display: none">x</p>
+    </div>
 
+    <div class="header-mob-nav no-display">
+        <a class="header-mob-nav-item" href="${origin}/">Home</a>
+        <a class="header-mob-nav-item" href="${origin}/gallery/">Gallery</a>
+        <a class="header-mob-nav-item" href="${origin}/the-team/">The Team</a>
+        <a class="header-mob-nav-item" href="${origin}/activities/">Activities</a>
+        <a class="header-mob-nav-item" href="${origin}/contact/">Contact</a>
+    </div>
+</div>
+`;
 
 const footerContent = `
 <div class="Main_text"><b>Join our mailing list for updates on events and for receiving our newsletter!</b></div>
@@ -30,6 +43,10 @@ const footerContent = `
 // });
 
 headerComponents.forEach(element=>{
-
     element.innerHTML=headerContent;
-})
+});
+
+// Attach toggle function for header-mob-nav
+document.querySelector(".header-mob-nav-btn").addEventListener("click", () => {
+    document.querySelector(".header-mob-nav").classList.toggle("no-display");
+});