Fixed the navbar for responsive view. (#644)

Anishkagupta04 · Jun 21, 2024 · acf69c9 · acf69c9
1 parent fab58a8
commit acf69c9
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -48,6 +48,12 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
     <style>
+      .nav_menu{
+        display: flex;
+      }
+      .nav_link{
+        display: flex;
+      }
 .iti--allow-dropdown input {
     padding-left: 50px;
     background-color: black; /* Adjust padding to prevent overlap */
@@ -100,7 +106,51 @@
   background-color: #55a5ea;
   color: white;
 }
-
+.hamburger{
+    display: none;
+    cursor: pointer;
+    position: absolute;
+    top: 29px;
+    left: 1.5%;
+}
+.line{
+    width: 30px;
+    height: 5px;
+    margin: 4px 4px;
+    background-color: white;
+}
+@media only screen and (max-width: 820px){
+  .hamburger{
+    display: block;
+  }
+  .header_container{
+    flex-direction: column;
+    align-items:start;
+    height: 24.8rem;
+    transition: 0.55s all ease-out;
+    /* padding-top: 5px; */
+  }
+  .nav_link{
+    flex-direction: column;
+    position: relative;
+    bottom: 40px;
+  }
+  /* .nav-link li{
+    margin-bottom: 5px;
+  } */
+  .nav-h{
+    height: 5.5rem;
+    width: 100vw;
+  }
+  .vis-h{
+    opacity: 0;
+  }
+  .img{
+    position: relative;
+    left: 300px;
+    bottom: 12px;
+  }
+}
 @media screen and (max-width: 992px) {
     .container {
         flex-wrap: wrap;
@@ -340,15 +390,12 @@
     <div class="loader"></div>
   </div>
       <!-- ############# Header ############# -->
-
-      <header class="header_container">
+      <header class="header_container nav-h">
         <div class="img">
-        <img id="rd-logo"  style="width: 90px; height: auto;" src="images/rd.png"> 
-      </div>
-
-      </div>
+          <img id="rd-logo"  style="width: 90px; height: auto;" src="images/rd.png"> 
+        </div>
       <nav class="nav_menu">
-        <ul class="nav_link">
+        <ul class="nav_link vis-h">
           <li><a href="index.html"><i class="bi bi-house-door-fill"></i> Home</a></li>
           <li><a href="#about"><i class="bi bi-info-circle-fill"></i> About</a></li>
           <li><a href="Html-Files/news.html"><i class="bi bi-newspaper"></i> News</a></li>
@@ -357,11 +404,17 @@
           <li><a href="#doctors"><i class="bi bi-person-circle"></i> Doctor</a></li>
           <li><a href="Html-Files/contact.html"><i class="bi bi-telephone"></i>Contact us</a></li>
           <li><a href="rateus.html"><i class="bi bi-star"></i>Rate Us</a></li>
-          <li><a href="login.html"><i class="bi bi-box-arrow-right"></i> Sign in/Sign up</a></li><br>
-          <a href="./Html-Files/Doctor Experience.html"><button>Find a Doctor</button></a>
-        </ul>
+
+          <li><a href="login.html"><i class="bi bi-box-arrow-right"></i> Sign in/Sign up</a></li>
+           <a href="./Html-Files/Doctor Experience.html"><button>Find a Doctor</button></a>
+         </ul>
+         <div class="hamburger">
+          <div class="line"></div>
+          <div class="line"></div>
+          <div class="line"></div>
+        </div>
       </nav>
-          </header>
+     </header>
 
   <!-- ############# Header ############# -->
 
@@ -1487,6 +1540,13 @@ <h4>RAPIDOC Newsletter</h4><br>
   document.body.removeChild(loader);
   });
   });
+  const hamburger=document.querySelector('.hamburger');
+  const navbar=document.querySelector('.header_container');
+  const nav=document.querySelector('.nav_link');
+  hamburger.addEventListener('click',()=>{
+    navbar.classList.toggle('nav-h');
+    nav.classList.toggle('vis-h');
+  })
   </script>
 </body>
 

diff --git a/style.css b/style.css
@@ -25,7 +25,7 @@ h6 {
 
 .nav_link li {
   margin-right: 1px; /* Add space between items */
-  padding: 2px 10px;
+  padding: 5px 10px;  
   display: inline-block;
   color: white;
 }
@@ -38,7 +38,10 @@ h6 {
 .nav_link li a:hover {
   color: #55a5ea;
 }
-
+#header{
+  position: relative;
+  top: 12px;
+}
 .header_container {
   background-color: #022a2d;
   opacity: 0.9;
@@ -48,10 +51,9 @@ h6 {
   align-items: center;
   height: 85px;
   margin: auto;
-  margin-top: 15px; /* Adjust this value to move the header down */
+  margin-top: 0px; /* Adjust this value to move the header down */
+  padding-top: 15px;
 }
-
-
 .container {
   /* display: ; */
   font-family: sans-serif;
@@ -139,7 +141,6 @@ h6 {
   z-index: -1;
   color: #fff;
 }
-
 @media (max-width: 768px) {
   .appointment-btn {
     margin: 0 15px 0 0;