Merge pull request #850 from Priyanshi0112/active_link

Add active link highlight in navbar for improved navigation
ankit071105 · Nov 1, 2024 · 4549850 · 4549850
2 parents af438dc + 132811e
commit 4549850
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 7 deletions.
diff --git a/about.html b/about.html
@@ -215,7 +215,7 @@
     <div class="logo" style="margin-right: 200px; font-size: 20px;">Ticket Marketplace</div>
     <div>
         <a href="index.html"><i class="fas fa-home"></i> Home</a>
-        <a href="about.html"><i class="fas fa-info-circle"></i> About</a>
+        <a href="about.html" class="active"><i class="fas fa-info-circle"></i> About</a>
         <a href="buy.html"><i class="fas fa-ticket-alt"></i> Buy Ticket</a>
         <a href="sell.html"><i class="fas fa-tags"></i> Sell</a>
         <a href="contactus.html"><i class="fas fa-envelope"></i> Contact</a>

diff --git a/buy.html b/buy.html
@@ -317,7 +317,7 @@
             <div>
                 <a href="index.html"><i class="fas fa-home"></i> Home</a>
                 <a href="about.html"><i class="fas fa-info-circle"></i> About</a>
-                <a href="buy.html"><i class="fas fa-ticket-alt"></i> Buy Ticket</a>
+                <a href="buy.html" class="active"><i class="fas fa-ticket-alt"></i> Buy Ticket</a>
                 <a href="sell.html"><i class="fas fa-tags"></i> Sell</a>
                 <a href="contactus.html"><i class="fas fa-envelope"></i> Contact</a>
                 <a href="contributor.html"><i class="fas fa-users"></i> Contributors</a>

diff --git a/contactus.html b/contactus.html
@@ -346,7 +346,7 @@
             <a href="about.html"><i class="fas fa-info-circle"></i> About</a>
             <a href="buy.html"><i class="fas fa-ticket-alt"></i> Buy Ticket</a>
             <a href="sell.html"><i class="fas fa-tags"></i> Sell</a>
-            <a href="#contact"><i class="fas fa-envelope"></i> Contact</a>
+            <a href="#contact" class="active"><i class="fas fa-envelope"></i> Contact</a>
             <a href="contributor.html"><i class="fas fa-users"></i> Contributors</a>
             <a href="register.html"><i class="fas fa-sign-in-alt"></i> Login</a>
         </div>

diff --git a/contributor.html b/contributor.html
@@ -258,7 +258,7 @@
             <a href="buy.html"><i class="fas fa-ticket-alt"></i> Buy Ticket</a>
             <a href="sell.html"><i class="fas fa-tags"></i> Sell</a>
             <a href="contactus.html"><i class="fas fa-envelope"></i> Contact</a>
-            <a href="contributor.html"><i class="fas fa-users"></i> Contributors</a>
+            <a href="contributor.html" class="active"><i class="fas fa-users"></i> Contributors</a>
             <a href="register.html"><i class="fas fa-sign-in-alt"></i> Login</a>
 
           </div>

diff --git a/index.css b/index.css
@@ -283,12 +283,39 @@ p {
   text-decoration: none;
   margin-right: 20px;
   font-weight: 600;
+  position: relative; /* Needed for the underline to position correctly */
 }
 
+/* Hover Effect */
 .navbar a:hover {
-  text-decoration: underline;
+  color: #ffd700; /* Change text color on hover */
+  font-weight: bold; /* Optional: make hover link bold */
 }
 
+/* Active Link Styles */
+.navbar a.active {
+  color: #ffd700; 
+  font-weight: bold; 
+}
+
+/* Underline effect for active link */
+.navbar a.active::after,
+.navbar a:hover::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -5px; 
+  height: 2px; 
+  background-color: #ffd700; 
+  transform: scaleX(1); 
+  transition: transform 0.3s ease; 
+}
+
+/* Optional: Remove underline on hover if you want to keep it only for active */
+.navbar a:hover::after {
+  transform: scaleX(1); /* Keep underline visible on hover */
+}
 .logo {
   font-size: 1.5rem;
   font-weight: bold;
@@ -749,4 +776,4 @@ button:hover {
   .faq-heading {
     font-size: 20px;
   }
-}
+}
diff --git a/index.html b/index.html
@@ -517,7 +517,7 @@ <h2>What type of transportation do you prefer for your travels?</h2>
 
         <!-- Navbar Links -->
         <div id="navLinks">
-            <a href="index.html"><i class="fas fa-home"></i> Home</a>
+            <a href="index.html" class="active"><i class="fas fa-home"></i> Home</a>
             <a href="about.html"><i class="fas fa-info-circle"></i> About</a>
             <a href="buy.html"><i class="fas fa-ticket-alt"></i> Buy Ticket</a>
             <a href="sell.html"><i class="fas fa-tags"></i> Sell</a>