Merge pull request #1048 from meetarora10/faq-nav

feat: Modified navbar on the FAQ's page for responsive view .
apu52 · Jul 14, 2024 · 9027ac0 · 9027ac0
2 parents 2b78004 + 2e480f9
commit 9027ac0
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 26 deletions.
diff --git a/faq-website.css b/faq-website.css
@@ -232,11 +232,16 @@
     color: white;
     background-color: rgb(40, 87, 241);
   }
-
-
-
-
-
+  @media only screen and (max-width:465px){
+    .newNav img{
+      position: relative;
+      right: 14px;
+    }
+    .nav__logo{
+      position: relative;
+      right: 16px;
+    }
+  }
 
 
 

diff --git a/faq.html b/faq.html
@@ -259,9 +259,9 @@
           </ul>
 
 
-          <a href="newLogin.html" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;"
+          <a href="newLogin.html" class="contact-btn"><button class="btn but2" id="btn-style" style="margin: 0;"
               data-aos="fade-down">Login/SignUp</button></a>
-              <a href="mapa.html" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;"
+              <a href="mapa.html" class="contact-btn"><button class="btn but" id="btn-style" style="margin: 0;"
                 data-aos="fade-down">view <map name=""></map></button></a>
 
           <a href="loginPage.html" class="contact-btn"><button class="btn" id="logout-btn" style="margin: 0; display: none;"

diff --git a/styles.css b/styles.css
@@ -1060,7 +1060,7 @@ header {
     gap: 2rem;
   }
 }
-@media screen and (max-width:768px) {
+/* @media screen and (max-width:768px) {
   .hamburger{
     position: relative;
     left: 20px;
@@ -1069,7 +1069,7 @@ header {
     position: relative;
     left: 90px;
   }
-}
+} */
 
 .image__gallary {
   display: grid;
@@ -2157,7 +2157,7 @@ body {
 .navLinks.activeHamburger {
   width: 100%;
 }
-@media screen and (max-width: 1146px) {
+/* @media screen and (max-width: 1146px) {
   .toggle-container {
     position: relative;
     right: 148px;
@@ -2166,8 +2166,16 @@ body {
     position: relative;
     right: 150px;
   }
-}
-@media screen and (max-width: 846px) {
+} */
+/* @media only screen and (max-width:957px){
+  .toggle-container{
+    left: 30px;
+  }
+  .hamburger{
+    left: 30px;
+  }
+} */
+/* @media screen and (max-width: 846px) {
   .toggle-container {
     position: relative;
     right: 200px;
@@ -2181,43 +2189,58 @@ body {
     right: 57px;
     top: 1px;
   }
-}
+} */
 @media screen and (max-width: 652px) {
   .toggle {
     width: 5vw;
   }
   .line {
     width: 5vw;
   }
-  .newNav {
-    height: 130px;
-  }
   .newNav img {
     position: relative;
-    bottom: 35px;
-    left: 130px;
+    bottom: 23px;
+    left: 109px;
   }
   .nav__logo {
     position: relative;
     left: 85px;
-    bottom: 35px;
+    bottom: 20px;
   }
   .btn {
     position: relative;
     top: 30px;
     left: -147px;
   }
-  .toggle-container {
+}
+@media only screen and (max-width:577px){
+  .but{
     position: relative;
-    top: 30px;
-    right: 377px;
+    top: -37px;
+    left: 85px;
   }
-  .hamburger {
+}
+@media only screen and (max-width: 465.5px){
+  .newNav img{
+    position: relative;
+    left: -58px;
+  }
+  .nav__logo{
     position: relative;
-    right: 388px;
+    left: -82px;
+  }
+  .but{
+    position: relative;
+    left:17px;
+    top: -4px;
+  }
+  .but2{
+    position: relative;
+    left: 30px;
+    top: -2px;
   }
 }
-@media screen and (max-width: 430px) {
+/* @media screen and (max-width: 430px) {
   .toggle-container {
     right: 374px;
   }
@@ -2227,7 +2250,7 @@ body {
   .nav__logo {
     left: 36px;
   }
-}
+} */
 /* New NAvbar CSS Ends Here*/
 /* #canvas {
   background: #232323;