Merge Merge pull request #191 from effect

underline hover effect
maniyaom · Oct 12, 2024 · 7986240 · 7986240
2 parents f024401 + 091f3df
commit 7986240
Showing 1 changed file with 75 additions and 32 deletions.
diff --git a/src/components/Navbar.css b/src/components/Navbar.css
@@ -2,8 +2,8 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
 
-:root{
-    --primary-color : #f84464;
+:root {
+    --primary-color: #f84464;
     --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     --light-gray: #f2f2f2;
     --text-color: #333;
@@ -21,13 +21,53 @@
 .nav {
     padding: 10px 200px;
     background: var(--primary-color);
+
+    top: 0px;
+    position: fixed;
+    z-index: 1000;
+    opacity: 30;
+    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */
+
     top: 0px; 
     position: sticky;
     z-index: 1;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    opacity:1 ;
+    opacity: 1;
+}
+
+nav ul a {
+    position: relative;
+    text-decoration: none;
+    letter-spacing: 0.5px;
+    color: #a0a0a0;
+
+}
+
+nav ul a:after {
+    content: "";
+    position: absolute;
+    background-color: white;
+    height: 3px;
+    width: 0;
+    left: 0;
+    bottom: -10px;
+    transition: 0.3s;
+}
+
+nav ul a:hover {
+    color: #ffffff;
+
+}
+
+nav ul a:hover:after {
+    width: 100%;
+}
+
+
+body {
+    padding-top: 30px;
 }
 
 .logo {
@@ -38,12 +78,12 @@
 }
 
 .nav-links {
-    width:fit-content;
+    width: fit-content;
     display: flex;
     justify-content: space-evenly;
 }
 
-.nav-links > li {
+.nav-links>li {
     list-style: none;
 }
 
@@ -60,28 +100,30 @@
     list-style: none;
     display: inline-block;
     margin: 0 15px;
-  }
-  
-  /* Styling the active link - Blue color when selected */
-  .active-link {
+}
+
+/* Styling the active link - Blue color when selected */
+.active-link {
     font-weight: 600;
     color: blue;
     /* font-weight: bold;  */
-  }
-  
-  /* Styling the inactive link - White color when not selected */
-  .inactive-link {
+}
+
+/* Styling the inactive link - White color when not selected */
+.inactive-link {
     font-weight: 600;
-    color: white; /* Makes the text white when not selected */
-    text-decoration: none; /* Prevents underline by default */
-  }
-
-  /* Hide div class (for conditional rendering) */
-  .hide-div {
+    color: white;
+    /* Makes the text white when not selected */
+    text-decoration: none;
+    /* Prevents underline by default */
+}
+
+/* Hide div class (for conditional rendering) */
+.hide-div {
     display: none;
-  }
-  
-  
+}
+
+
 .red {
     color: green;
 }
@@ -212,7 +254,7 @@ summary.avatar img {
     border-bottom: 1px solid var(--text-color);
 }
 
-.dropdown ul li.divider ~ li {
+.dropdown ul li.divider~li {
     border: none;
 }
 
@@ -245,7 +287,7 @@ summary.avatar img {
     font-style: italic;
 }
 
-a{
+a {
     cursor: pointer;
 }
 
@@ -255,21 +297,22 @@ a{
 }
 
 .logout-button {
-    background: none; 
-    border: none; 
-    cursor: pointer; 
-    display: flex; 
-    align-items: center; 
-    font-size: 16px; 
-    transition: color 0.3s; 
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    transition: color 0.3s;
     padding-left: 25px;
     padding-top: 10px;
     padding-bottom: 10px;
 }
+
 .logout-button:hover {
     color: var(--primary);
 }
 
 .logout-button span {
-    margin-right: 2px; 
+    margin-right: 2px;
 }