Merge pull request anuragverma108#2219 from meetarora10/about-branch

Navbar on the about us page is properly visible .
huamanraj · Jun 29, 2024 · bca3e56 · bca3e56
2 parents 56695b4 + 6522ef4
commit bca3e56
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 22 deletions.
diff --git a/assets/css/aboutus.css b/assets/css/aboutus.css
@@ -247,6 +247,9 @@ label.newsletter-form{
    overflow-x: hidden;
    transition: 0.3s ease-in;
    border: none;
+   position: absolute;
+   top: 0;
+   left: -6px;
   }
-   body .nav_activated{transform:translateX(-200%)}
+
 }
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -98,7 +98,7 @@ body > main > article > section.section.preview > div > p:nth-child(4) {
 .navbar-list {
   text-align: center;
   display: flex;
-  flex-direction: row;
+  /* flex-direction: row; */
   align-items: center;
   justify-content: center;
 }
@@ -615,7 +615,7 @@ body {
   display: block;
 }
 
-.navbar {
+/* .navbar {
   border: 1px solid #000;
   display: inline-block;
   position: absolute;
@@ -628,7 +628,7 @@ body {
   overflow: hidden;
   visibility: hidden;
   transition: 0.25s var(--cubic-out);
-}
+} */
 
 .navbar.active {
   max-height: 387px;
@@ -778,7 +778,7 @@ body {
   display: block;
 }
 
-.navbar {
+/* .navbar {
   border: 1px solid #000;
   display: inline-block;
   position: absolute;
@@ -792,7 +792,7 @@ body {
   visibility: hidden;
   transition: 0.25s var(--cubic-out);
   padding: 0;
-}
+} */
 
 .navbar.active {
   max-height: 387px;
@@ -3117,13 +3117,13 @@ footer {
   }
 }
 
-@media (min-width: 320px) {
+@media (max-width: 320px) {
   .navbar-list {
     flex-direction: column;
   }
 }
 
-@media (min-width: 881px) {
+@media (max-width: 881px) {
   .navbar-list {
     flex-direction: column;
   }
@@ -3156,16 +3156,16 @@ footer {
   }
 }
 
-@media (min-width: 641px) {
+@media (max-width: 641px) {
   .navbar-list {
     flex-direction: column;
   }
 }
-@media (min-width: 960px) {
+/* @media (min-width: 960px) {
   .navbar-list {
     flex-direction: row;
   }
-}
+} */
 @media (min-width: 960px) and (max-width: 1010px) {
   #back-to-top-container {
     position: fixed;
@@ -3175,11 +3175,11 @@ footer {
   }
 }
 
-@media (min-width: 1025px) {
+/* @media (min-width: 1025px) {
   .navbar-list {
     flex-direction: row;
   }
-}
+} */
 @media (min-width: 1281px) {
   .navbar-list {
     flex-direction: row;

diff --git a/assets/html/about.html b/assets/html/about.html
@@ -43,7 +43,9 @@
       margin: 0;
       padding: 0;
     }
-
+    .header{
+      position: fixed;
+    }
     .container {
       max-width: 1200px;
       margin: 0 auto;
@@ -282,6 +284,62 @@
     overflow: hidden;
     cursor: pointer;
 }
+.hamburger{
+    display: none;
+    cursor: pointer;
+    position: absolute;
+    top: 24px;
+    left: 1.5%;
+}
+.line{
+    width: 36px;
+    height: 5px;
+    margin: 4px 4px;
+    background-color: rgb(240, 15, 15);
+}
+@media only screen and (max-width:1063px){
+    .nav{
+        flex-direction: column;
+    }
+    .header{
+        flex-direction: column;
+        height: 62rem;
+        transition: 0.55s all ease-out;
+        padding-top: 5px;
+    }
+    .navbar-item{
+        margin-right: 40px;
+    }
+    .navbar-list{
+      position: relative;
+      top: 265px;
+      left: 163px;
+    }
+    .hamburger{
+        display: block;
+    }
+    .nav-h{
+        height: 78px;
+        width: 100vw;
+    }
+    .vis-h{
+        opacity: 0;
+    }
+    /* .logo img{
+      position: relative;
+      top: 72px;
+      left: 145px;
+    } */
+}
+@media only screen and (max-width:990px){
+  .header{
+    height: 84px;
+  }
+  .logo img{
+    position: relative;
+    left: 50px;
+  }
+}
 
 
   </style>
@@ -290,13 +348,13 @@
 <body>
 
 
-  <header class="header header-anim" data-header>
+  <header class="header header-anim nav-h" data-header>
 
     <div class="container">
 
       <nav class="navbar nav_activated" data-navbar>
 
-        <ul class="navbar-list">
+        <ul class="navbar-list nav vis-h">
           <a href="../../index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
             <img src="../images/final.png" class="logopic" style="width:100px;">
           </a>
@@ -376,8 +434,8 @@
             <!-- <div class="action">
               <div class="profile" onclick="menuToggle();">
                 <img src="../images/avatar.jpg">
-              </div> -->
-              <!-- <div class="menu">
+              </div>
+              <div class="menu">
                 <h3>XYZ<br /><span>Book Lover</span></h3>
                 <ul>
                   <li>
@@ -392,8 +450,8 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
                   <li>
                     <img src="./assets/images/settings.png" /><a href="#">Setting</a>
                   </li>
-                  <li><img src="./assets/images/help.png" /><a href="#">Help</a></li> -->
-                  <!-- <li>
+                  <li><img src="./assets/images/help.png" /><a href="#">Help</a></li>
+                  <li>
                     <img src="./assets/images/logout.png" /><a href="#">Logout</a>
                   </li>
                 </ul>
@@ -409,8 +467,13 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
             <!-- <li class="navbar-item">
               <div id="google_element"></div>
             </li> -->
-          <!-- </ul>
-        </nav> -->
+          </ul>
+          <div class="hamburger">
+            <div class="line"></div>
+            <div class="line"></div>
+            <div class="line"></div>
+          </div>
+        </nav>
 
       <!-- <script src="http://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
       <script>
@@ -421,6 +484,13 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
         }
       </script> -->
       <script>
+        const hamburger=document.querySelector('.hamburger');
+        const head=document.querySelector('.header');
+        const nav=document.querySelector('.nav');
+        hamburger.addEventListener('click',()=>{
+          head.classList.toggle('nav-h');
+          nav.classList.toggle('vis-h');
+        })
         let lastScrollTop = 0;
 
         function onScroll() {