Merge pull request #482 from mahek0620/updated-navbar

Update nav.css
MAVRICK-1 · Jul 22, 2024 · af8dd9d · af8dd9d
2 parents e74681b + eab5035
commit af8dd9d
Showing 1 changed file with 68 additions and 146 deletions.
diff --git a/src/components/header/nav/nav.css b/src/components/header/nav/nav.css
@@ -1,54 +1,64 @@
+/* nav.css */
+
+/* General styles */
 .nav {
   width: 100%;
   height: 80px;
-  margin: auto;
+  margin: auto; /* Centers horizontally */
+  display: flex;
+  align-items: center; /* Centers vertically */
+  justify-content: center;
+  position: relative;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.nav .catTab {
-  margin-top: 13px;
-  padding: 5px 12px !important;
-  font-size: 20px !important;
-  text-transform: capitalize !important;
+.nav .container-fluid {
+  padding: 0;
 }
-.dropdown_menu ul li button a:hover {
-  color: #3bb77e;
-
+
+.nav .row {
+  align-items: center;
+}
+
+/* Browse all category button */
+.nav .col-sm-2 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
 }
-.nav nav .dropdown_menu li button a:hover {
-  color: #3bb77e !important; 
-
+
+.nav .col-sm-2 .catTab {
+  margin-top: 13px;
+  padding: 5px 12px;
+  font-size: 20px;
+  text-transform: capitalize;
 }
 
 @media (min-width: 1000px) and (max-width: 1400px) {
   .browBtn {
-    padding: auto !important;
-    height: 79px !important;
+    padding: auto;
+    height: 79px;
   }
   .nav nav ul li button a {
-    font-size: 15px !important;
+    font-size: 15px;
   }
   .browHead {
-    color: white;
-    z-index: 10;
-    opacity: 1;
-    font-size: 18px !important;
+    font-size: 18px;
     margin-top: 10px;
   }
 }
 
 .catTab .MuiSvgIcon-root {
-  fill: #fff !important; /* Set icon color */
+  fill: #fff; /* Set icon color */
   width: 24px; /* Adjust icon size as needed */
   height: 24px;
   margin-left: 5px;
-  margin: 0 5px; /* Add some space between the text and icons */
 }
+
 .browHead {
   color: white;
-  z-index: 10;
-  opacity: 1;
   font-size: 20px;
   margin-top: 10px;
 }
@@ -58,137 +68,102 @@
 }
 
 .nav nav ul li button {
-  text-transform: capitalize !important;
-  padding-right: 25px !important;
-  padding-top: 20px;
-  padding-bottom: 20px;
-
-  border-radius: 3px !important;
+  text-transform: capitalize;
+  padding: 20px;
+  border-radius: 3px;
 }
+
 .active-link {
-  background-color: #aef3d3;
-  /* background: #017640; */
-  color: #017640 !important;
+  background-color: #73eeb5;
+  padding: 8px;
   border-radius: 2px;
-  border-radius: 10px;
-}
-.nav nav ul li button .MuiSvgIcon-root {
-  z-index: 1;
+  font-weight: bold;
 }
 
 .nav nav ul li button:hover {
   color: #fff;
 }
 
 .nav nav ul li button a {
-  text-decoration: none !important;
+  text-decoration: none;
   color: rgba(0, 0, 0, 0.8);
   font-size: 21px;
 }
 
 .nav .part3 .phNo svg {
-  font-size: 45px !important;
+  font-size: 45px;
   opacity: 0.8;
 }
 
 .nav .part3 .phNo h3 {
-  font-size: 32px !important;
-  line-height: 35px !important;
+  font-size: 32px;
+  line-height: 35px;
 }
 
 .nav .part3 .phNo p {
-  font-size: 16px !important;
+  font-size: 16px;
   opacity: 0.8;
 }
 
 .nav nav .dropdown_menu {
   position: absolute;
   top: 150%;
-  left: 0px;
+  left: 0;
   width: 300px;
-  padding: 13px 0px 10px 35px;
-  height: auto;
   background: #fff;
-  box-shadow:
-    0 3px 6px rgba(0, 0, 0, 0.16),
-    0 3px 6px rgba(0, 0, 0, 0.23);
-
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+  padding: 10px 0;
   z-index: 100;
   opacity: 0;
   visibility: hidden;
   transition: all 0.1s ease-in-out;
 }
 
-nav .dropdown_menu li {
-  width: 100% !important;
+.nav nav .dropdown_menu li {
   list-style: none;
-  margin: 0px !important;
 }
 
 .nav nav .dropdown_menu li button {
-  width: 100% !important;
-  text-align: left !important;
-  justify-content: flex-start !important;
-  text-transform: capitalize !important;
-  font-size: 16px !important;
-  padding: 10px 20px !important;
-  color: #3bb77e !important;
+  text-align: left;
+  font-size: 16px;
+  padding: 10px 20px;
+  color: #3bb77e;
 }
 
 .nav nav .dropdown_menu li button a {
-  font-weight: 400 !important;
-}
-.megaMenu .col ul li a:hover{
-  font-weight: 600;
-  color: #3bb77e;
-}
-.part2 ul li button:hover {
-  background-color: inherit !important;
-  box-shadow: none !important;
+  font-weight: 400;
 }
 
-.part2 ul li button:hover a {
-  color: #191717 !important;
-}
-.nav nav li:hover .open {
+.nav nav li:hover .dropdown_menu {
   top: 100%;
-  opacity: 1 !important;
-  visibility: inherit;
+  opacity: 1;
+  visibility: visible;
 }
 
-/*Browse all category styling*/
 .nav nav .all_menu {
   position: absolute;
   top: 100%;
-  left: 0px;
+  left: 0;
   width: 35vw;
-  height: auto;
   background: #fff;
-  box-shadow:
-    0 3px 6px rgba(0, 0, 0, 0.16),
-    0 3px 6px rgba(0, 0, 0, 0.23);
-  padding: 10px 0px;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+  padding: 10px 0;
   z-index: 100;
   opacity: 0;
   visibility: hidden;
   transition: all 0.1s ease-in-out;
 }
 
-.all_menu.browse_menu {
-  padding: 10px;
-  box-sizing: border-box;
+.nav nav .all_menu.browse_menu {
   width: 50vw;
-  transition: width 0.3s ease-in-out;
 }
 
-.all_menu.browse_menu.expanded {
+.nav nav .all_menu.browse_menu.expanded {
   width: 75vw;
 }
 
-nav .all_menu li {
-  width: 100% !important;
+.nav nav .all_menu li {
   list-style: none;
-  margin: 0px !important;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -197,24 +172,17 @@ nav .all_menu li {
 .nav nav li:hover .all_menu {
   top: 100%;
   opacity: 1;
-  visibility: inherit;
-}
-
-.all_menu.browse_menu {
-  padding: 10px;
-  box-sizing: border-box;
+  visibility: visible;
 }
 
 .set-box {
-  box-sizing: border-box;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   margin: 5px;
 }
 
 .grid-container {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(4, auto);
   gap: 2px;
   padding: 3px;
   transition: all 0.3s ease-in-out;
@@ -226,25 +194,17 @@ nav .all_menu li {
 
 .text-beox {
   color: #191717;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
   font-size: 16px;
   margin: 0;
   padding: 0;
+  display: flex;
+  align-items: center;
 }
 
 .set-box:hover .text-beox {
   color: #267550;
 }
 
-.green-icon {
-  height: 30px;
-  width: 30px;
-  float: left;
-  padding-right: 2px;
-}
-
 .showM {
   text-align: center;
   margin-top: 5px;
@@ -258,9 +218,7 @@ nav .all_menu li {
   display: inline-block;
   border: 1px solid #3bb77e;
   border-radius: 5px;
-  transition:
-    background 0.3s,
-    color 0.3s;
+  transition: background 0.3s, color 0.3s;
 }
 
 .showM a:hover {
@@ -269,47 +227,11 @@ nav .all_menu li {
 }
 
 .megaMenu .col ul li {
-  margin-bottom: 10px !important;
-  display: block;
+  margin-bottom: 10px;
 }
 
 .megaMenu .col ul li a {
   color: rgba(0, 0, 0, 0.7);
   font-size: 25px;
   text-decoration: none;
 }
-
-/* CSS file */
-.bold-h4 {
-  font-weight: bold;
-  color: #191717;
-}
-
-@media (max-width:768px) {
-  .dropdown_menu ul li button a {
-    color: white;
-
-  }
-  .nav nav .dropdown_menu li button a {
-    color: white;
-
-  }
-  .dropdown_menu ul li button a:hover {
-    color: #3bb77e;
-
-  }
-  .megaMenu .col ul li a {
-    color: white;
-  }
-  .part2 ul li button:hover a {
-    color: white !important;
-  }
-  .nav nav .dropdown_menu.open{
-    backdrop-filter: blur(14px) saturate(135%);
-    -webkit-backdrop-filter: blur(14px) saturate(135%);
-    background-color: rgba(59, 183, 126, 0.49);
-    border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.125);
-
-  }
-}