Merge pull request #243 from HammadKhaan/fix/header-ui-on-small-screen

Header UI fixed on screen width greater than 640px and less than 900px

Author: jsvigneshkanna

components/navbar.js

@@ -15,7 +15,7 @@ const Navbar = () => {
   };
   const displayMenu = () => {
     if (isMenuOpen) {
-      return "flex sm:hidden flex-col justify-center items-center gap-2 my-2";
+      return "flex small-screen-header flex-col justify-center items-center gap-2 my-2";
     } else {
       return "hidden";
     }
@@ -45,7 +45,7 @@ const Navbar = () => {
             <div role="button" className="nav_links">FAQs</div>
           </Link>
         </div>
-        <div className="flex sm:hidden hamburger" onClick={showMenu}>
+        <div className="hamburger" onClick={showMenu}>
           <p>{isMenuOpen ? <AiOutlineClose /> : <MdMenu />}</p>
         </div>
       </nav>

styles/components/navbar_style.css

@@ -45,13 +45,13 @@ nav {
   background-color: rgba(118, 14, 216, 0.501);
   border-radius: 40px;
 }
-@media (max-width: 640px) {
+@media (max-width: 899px) {
   .right_contents {
     display: none;
   }
 }
 
-@media (max-width: 900px) {
+@media (max-width: 899px) {
   .nav_links {
     padding: 12px;
     /* margin-bottom: 24px; */
@@ -70,9 +70,21 @@ nav {
   }
 }
 
-@media (max-width: 900px) {
+@media (max-width: 899px) {
   .nav_container nav div {
     flex-direction: column;
     gap: 8px;
   }
 }
+
+@media (min-width: 899px) {
+  .hamburger {
+    display: none;
+  }
+}
+
+@media (min-width: 899px) {
+  .small-screen-header {
+    display: none;
+  }
+}