Merge pull request #1132 from ayush-848/main

fixed navbar
Anishkagupta04 · Aug 5, 2024 · b78d40b · b78d40b
2 parents b14ac3c + 2da7210
commit b78d40b
Show file tree

Hide file tree

Showing 4 changed files with 149 additions and 75 deletions.
diff --git a/checkup.css b/checkup.css
@@ -65,7 +65,7 @@ body {
 
   @media (max-width: 768px) {
     .header_container{
-        height: 50px;
+        height: 60px;
       }
     .nav_link {
       display: none;

diff --git a/index.css b/index.css
@@ -124,82 +124,149 @@ option {
 .img p{
     display: none;
 }
-@media only screen and (max-width: 820px) {
+@media (max-width: 820px) {
+    .nav_menu {
+      flex-direction: column;
+    }
+
     .hamburger {
-        display: block;
+      display: flex;
     }
-
-    .header_container {
-        flex-direction: column;
-        align-items: start;
-        height: 24.8rem;
-        transition: 0.55s all ease-out;
-        /* padding-top: 5px; */
+
+    .mobile-logo-text {
+      display: block;
     }
-
+  
     .nav_link {
-        flex-direction: column;
-        position: relative;
-        bottom: 40px;
+      display: none;
+      flex-direction: column;
+      position: fixed;
+      top: 60px;
+      right: 0;
+      background-color: #022a2d;
+      width: 40% !important;
+      padding: 20px;
+      z-index: 10;
+      box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
     }
-
-    /* .nav-link li{
-    margin-bottom: 5px;
-  } */
-    .nav-h {
-        height: 5.5rem;
-        width: 100vw;
+  
+    .nav_link.active {
+      display: flex;
+    }
+
+    .nav_link li {
+      margin: 10px 0;
     }
+
+    .nav_link a {
+      font-size: 1.2em;
+    }
+
+    .nav_link .btn1 {
+      width: 100%;
+      text-align: center;
+    }
+  }
 
-    .vis-h {
-        opacity: 0;
+@media (max-width: 880px) {
+    .nav_menu {
+      flex-direction: column;
     }
-    .img img{
+
+    .hamburger {
+      display: flex;
+    }
+
+    .mobile-logo-text {
+        display: inline-block;
+        color: white;
+        font-weight: bold;
+        margin-left: 50px;
+        margin-right: 23rem;
+        font-size: 40px;
+    }
+    #rd-logo {
+        margin-left: 21rem;
+        margin-right: -6rem;
+    }
+
+    .nav_link {
         display: none;
+        flex-direction: column;
+        position: fixed;
+        top: 60px;
+        left: 20px;
+        margin-top: 37px !important;
+        background-color: #022a2d;
+        width: 40% !important;
+        padding: 20px;
+        z-index: 10;
+        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
     }
-    .img p{
-        display: block;
-        position: relative;
-        left: 300px;
-        bottom: 0;
+
+    .nav_link.active {
+      display: flex;
     }
-}
-
-@media screen and (max-width: 992px) {
-    .container {
-        flex-wrap: wrap;
-        justify-content: center;
+
+    .nav_link li {
+      margin: 10px 0;
     }
-
-    .sec-img {
-        max-width: 100%;
-        margin: 20px 0;
-        position: relative;
-        top: 0;
-        right: 0;
-
+
+    .nav_link a {
+      font-size: 1.2em;
     }
-
-    .content {
-        text-align: center;
-        padding: 10px;
+  
+    .nav_link .btn1 {
+      width: 100%;
+      text-align: center;
     }
-}
+  }
 
-@media screen and (max-width: 768px) {
-    .content {
-        text-align: center;
-        padding: 10px;
+@media (max-width: 768px) {
+    .nav_menu {
+      flex-direction: column;
     }
-
-    .sec-img {
-        max-width: 100%;
-        margin: 20px 0;
-        position: relative;
-        top: 0;
-        right: 0;
+
+    .hamburger {
+      display: flex;
     }
-}
+
+    .mobile-logo-text {
+      display: block;
+    }
+
+    .nav_link {
+      display: none;
+      flex-direction: column;
+      position: fixed;
+      top: 60px;
+      left: 20px;
+      background-color: #022a2d;
+      width: 45% !important;
+      margin-top: 30px;
+      padding: 20px;
+      z-index: 10;
+      box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
+    }
+
+    .nav_link.active {
+      display: flex;
+    }
+
+    .nav_link li {
+      margin: 10px 0;
+      font-size: 18px;
+    }
+
+    .nav_link a {
+      font-size: 1.2em;
+    }
+
+    .nav_link .btn1 {
+      width: 100%;
+      text-align: center;
+    }
+  }
 
 /*Preloader CSS*/
 .pre {
@@ -461,21 +528,25 @@ select {
 
     .header_container {
         width: 163vw;
-        height: auto;
-    }
-
-    .nav_menu {
-        padding: 10px;
-        height: auto;
-    }
-
-    .nav-h {
-        height: 5.5rem;
+        height: 6rem !important;
         width: -webkit-fill-available !important;
         justify-content: center;
         flex-direction: row;
         align-items: center;
     }
+    .nav-h .nav_link{
+      display:none !important;
+    }
+
+    .nav_menu {
+        height: auto;
+    }
+
+  #rd-logo {
+    display: table-row;
+    margin-right: -4rem !important;
+    margin-left: 25rem !important;
+  }
 
     .container {
         flex-wrap: wrap;

diff --git a/index.html b/index.html
@@ -97,6 +97,13 @@
       </ul>
     </nav>
   </header>
+  <script>
+    function toggleMenu() {
+  const navLinks = document.querySelector('.nav_link');
+  navLinks.classList.toggle('active');
+}
+
+  </script>
   <header id="header" class="fixed-top">
     <div class="container d-flex align-items-center">
       <a href="#appointment" class="appointment-btn scrollto">

diff --git a/style.css b/style.css
@@ -400,7 +400,7 @@ h6 {
   align-items: center;
   position: fixed;
   width: 100%;
-  height: 85px;
+  height: 95px;
   margin: auto;
   margin-top: 0px;
   padding-top: 15px;
@@ -434,10 +434,6 @@ h6 {
   .logo-text {
     display: none;
   }
-
-  #rd-logo {
-    display: none;
-  }
 
   .nav_link {
     display: none;