responsive navbar

EddMarwa · Jul 8, 2024 · 9c0e178 · 9c0e178
1 parent 54e5feb
commit 9c0e178
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 44 deletions.
diff --git a/assets/team/team.html b/assets/team/team.html
@@ -11,7 +11,7 @@
   <style>
 
     :root {
-      --brown: #513a2f;
+      --brown: #513a2f;       
       --brown1: #665248;
       --cream: #ffe8a2;
       --white: #ffffff;
@@ -146,6 +146,7 @@
 
   <div class="Tcontainer swiper">
     <div class="slider-wrapper">
+
       <div class="card-list swiper-wrapper"> 
 
         <div class="card-item swiper-slide">

diff --git a/index.html b/index.html
@@ -17,19 +17,18 @@
 
   <body>
     <!-- Header/navbar starts -->
-    <header class="navbar">
+    <header class="nav">
       <a href="#">
         <img src="assets/logo.jpg" alt="Logo" class="logo" />
       </a>
-      <button class="navbar-toggler" aria-label="Toggle navigation">
-        &#9776;
-      </button>
-      <ul class="navbar-menu">
+      <div class="openMenu"><i class="fa fa-bars"></i></div>
+      <ul class="mainMenu">
         <li><a href="#Home">Home</a></li>
         <li><a href="#About">About</a></li>
         <li><a href="#Services">Services</a></li>
         <li><a href="assets/team/team.html">Team</a></li>
         <li><a href="#Contact">Contact</a></li>
+        <div class="closeMenu"><i class="fa fa-times"></i></div>
       </ul>
     </header>
     <!------ Header/navbar ends ----->
@@ -89,7 +88,7 @@ <h1>
 
       <div class="circleContainerWrapper">
         <div class="circleContainer">
-            <img src="assets/logo.jpg" alt="Circle Image">
+            <img src="assets/logo.jpg" alt="Circle Image">  
         </div>
         <div class="circleText">
             <p><span>Welcome to INVODTECH Ltd; where we merge innovation with functionality. </span><br>

diff --git a/script.js b/script.js
@@ -1,12 +1,23 @@
 //------------ Hamburger menu --------------------//
-document.addEventListener('DOMContentLoaded', function() {
-  const toggler = document.querySelector('.navbar-toggler');
-  const menu = document.querySelector('.navbar ul');
+const mainMenu = document.querySelector('.mainMenu');
+const closeMenu = document.querySelector('.closeMenu');
+const openMenu = document.querySelector('.openMenu');
+
+
+openMenu.addEventListener('click', show); 
+closeMenu.addEventListener('click', close); 
+
+
+function show(){
+    mainMenu.style.display = 'flex';
+    mainMenu.style.top = '0';
+}
+
+function close(){
+    mainMenu.style.top = '-1000%'
+    //mainMenu.style.top = '0'
+}
 
-  toggler.addEventListener('click', function() {
-    menu.classList.toggle('show');
-  });
-});
 //------------Testimonials-------------------// 
 document.addEventListener('DOMContentLoaded', () => {
   let testimonials = document.querySelectorAll('.testimonial');

diff --git a/styles.css b/styles.css
@@ -118,8 +118,7 @@ body {
   color: white;
 }
 
-
-.navbar {
+.nav {
   position: fixed;
   display: flex;
   justify-content: space-between;
@@ -131,7 +130,8 @@ body {
   z-index: 1000;
   padding: -2px;
 }
-.navbar ul {
+
+.nav ul {
   list-style-type: none;
   display: flex;
   gap: 10px;
@@ -140,13 +140,13 @@ body {
   text-align: center;
 }
 
-.navbar li {
+.nav li {
   display: inline-block;
   margin: 0 5px;
   margin-left: 5px;
 }
 
-.navbar a {
+.nav a {
   text-decoration: none;
   color: #fff;
   font-size: 16px;
@@ -155,40 +155,85 @@ body {
   border-radius: 100px;
   transition: background-color 0.2s ease, box-shadow 0.2s ease;
 }
-.navbar li a {
+.nav li a {
   transition: all 0.2s ease 0s;
 }
-.navbar li a:hover {
+.nav li a:hover {
   color: var(--maroon);
 }
-.navbar-toggler {
-  display: none;
-  background: none;
-  border: none;
+
+.nav .mainMenu {
+  display: flex;
+  list-style: none;
+}
+
+.nav .mainMenu li a {
+  display: inline-block;
+  padding: 15px;
+  text-decoration: none;
+  text-transform: uppercase;
   color: #fff;
-  font-size: 24px;
+  font-size: 1.5rem;
 }
-/*------ Navbar Responsive--------*/
-@media (max-width: 768px) {
-  .navbar ul {
-    display: none;
-    flex-direction: column;
-    position: absolute;
-    top: 60px;
-    right: 20px;
-    background-color: #333;
-    width: 200px;
-    border-radius: 5px;
-  }
 
-  .navbar ul.show {
-    display: flex;
-  }
-  .navbar-toggler {
-    display: block;
-  }
+.nav .mainMenu li a:hover{
+  background: rgb(96, 2,2);
 }
+
+.nav .openMenu {
+  font-size: 2rem;
+  cursor: pointer;
+  display: none;
+  margin: 20px;
+}
+
+.nav .mainMenu .closeMenu, i {
+  font-size: 2rem;
+  display: none;
+  cursor: pointer;
+}
+
+
+
 /*------ Navbar Responsive--------*/
+@media(max-width: 800px){
+  .nav .mainMenu {
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #000;
+  transition: top .1s ease;
+  display: none;
+}
+.nav .mainMenu .closeMenu {
+  display: block;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+}
+.nav .openMenu {
+  display: block;
+}
+
+.nav .mainMenu li a:hover {
+background: none;
+color: rgb(96, 2, 2);
+font-size: 1.6rem;
+}
+i {
+  display: inline-block;
+  padding: 12px;
+}
+
+
+}
+/*------ Navbar Ends--------*/
 
 /* animation background begins */
 #particles-js