Merge pull request #2567 from ritiksingh-01/fix/navbar-active-link

Fix active link functionality in navbar for accurate page indication
ayush-that · Nov 1, 2024 · f5a5ff3 · f5a5ff3
2 parents 1231cb0 + 9848879
commit f5a5ff3
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 20 deletions.
diff --git a/about.html b/about.html
@@ -164,7 +164,7 @@
                         🏡</a>
                     </li>
                     <li class="nav-item">
-                      <a class="page-scroll" href="./about.html" style="color: rgb(237, 242, 244);">About Us 📖</a>
+                      <a class="page-scroll active-link" href="./about.html" style="color: rgb(237, 242, 244);">About Us 📖</a>
                     </li>
                     <li class="nav-item">
                       <a class="page-scroll" href="./finance.html" style="color: rgb(237, 242, 244);">Courses 📚</a>

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -866,8 +866,14 @@ p {
 .navbar-nav .nav-item a:hover {
   text-decoration: none !important;
 }
-
-
+.active-link {
+  background-color: rgba(255, 99, 71, 0.2); 
+  border-radius: 5px;
+  color: #ffffff; 
+  transform: scale(0.95);
+  border-bottom: 2px solid #edf2f4; 
+  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
+}
 .sticky {
   position: fixed;
   z-index: 99;

diff --git a/contact.html b/contact.html
@@ -361,7 +361,7 @@
                 </div>
                 <ul id="nav" class="navbar-nav ml-auto" style="margin: auto;">
                   <li class="nav-item">
-                    <a class="page-scroll active-link" href="./index.html" style="color: rgb(237, 242, 244);">Home
+                    <a class="page-scroll" href="./index.html" style="color: rgb(237, 242, 244);">Home
                       🏡</a>
                   </li>
                   <li class="nav-item">
@@ -371,7 +371,7 @@
                     <a class="page-scroll" href="./finance.html" style="color: rgb(237, 242, 244);">Courses 📚</a>
                   </li>
                   <li class="nav-item">
-                    <a class="page-scroll" href="./contact.html" style="color: rgb(237, 242, 244);">Contact📞</a>
+                    <a class="page-scroll active-link" href="./contact.html" style="color: rgb(237, 242, 244);">Contact📞</a>
                   </li>
                   <li class="nav-item">
                     <a class="page-scroll" href="./faq.html" style="color: rgb(237, 242, 244);">Help 🙋‍♂️</a>

diff --git a/finance.html b/finance.html
@@ -82,7 +82,7 @@
                       <a class="page-scroll" href="./about.html" style="color: rgb(237, 242, 244);">About Us 📖</a>
                     </li>
                     <li class="nav-item">
-                      <a class="page-scroll" href="./finance.html" style="color: rgb(237, 242, 244);">Courses 📚</a>
+                      <a class="page-scroll active-link" href="./finance.html" style="color: rgb(237, 242, 244);">Courses 📚</a>
                     </li>
                     <li class="nav-item">
                       <a class="page-scroll" href="./contact.html" style="color: rgb(237, 242, 244);">Contact📞</a>

diff --git a/navbar.css b/navbar.css
@@ -49,15 +49,6 @@ z
     -ms-transition: background-color 0.3s ease-in-out;
     -o-transition: background-color 0.3s ease-in-out;
 } */
-.active-link {
-            background-color: rgba(255, 99, 71, 0.2);
-            /* Soft coral with slight transparency */
-            border-radius: 5px;
-            color: #ffffff;
-            /* White text for contrast */
-            transform: scale(0.95);
-    border-bottom: 2px solid #edf2f4;
-}
 
 .navbar-nav {
 
@@ -492,11 +483,6 @@ z
     width: 0;
 }
 
-.mobile-menu .active-link {
-    background:
-        linear-gradient(black) bottom/ 100% 2px no-repeat,
-        transparent;
-}
 
 .mobile-menu__trigger {
     cursor: pointer;