Merge pull request #1316 from jency1/navbar-hover-color

Fixed Hover Color Matching in Navbar and Enhanced Navbar on Home Page
khushi-joshi-05 · Jul 23, 2024 · 054321b · 054321b
2 parents 8e1e9fe + 4a43826
commit 054321b
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 69 deletions.
diff --git a/Css-files/navbar.css b/Css-files/navbar.css
@@ -109,6 +109,9 @@ ul {
   color: #f13800e4;
 }
 
+
+/* .end-links .nav-item .nav-link:hover {
+
 .center-links .nav-item .dropdown-menu {
   background-color: var(--drop-bg);
   color: var(--a);
@@ -119,18 +122,32 @@ ul {
 
 /* End Links */
 .end-links .nav-item .nav-link:hover {
+
   color: rgba(255, 183, 0, 0.705);
-}
+} */
 
 .navbar-nav.center-links .active {
   color: #dc3545;
   border-bottom: 2px solid #dc3545;
   gap:10px;
 }
 
-.navbar-nav.end-links .active {
+/* .navbar-nav.end-links .active {
   color: rgba(255, 183, 0, 0.705);
   border-bottom: 2px solid rgba(255, 183, 0, 0.705);
+} */
+
+.nav-link:hover {
+  color: #dc3545;
+  transform: scale(1.15);
+}
+
+.nav-items{
+  padding: 10px;
+}
+
+
+#theme-toggle-icon{
   gap:10px;
 }
 

diff --git a/index.html b/index.html
@@ -85,26 +85,26 @@
             </button>
             <!-- Centered Navbar Links -->
             <div class="collapse navbar-collapse hamburgeritems centerdiv order-2 order-lg-0">
+
                 <ul class="navbar-nav center-links">
-                    <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="index.html">
 
+                  <!-- Centerd the links in navbar -->
 
-                            <i class="fa-solid fa-house"></i> Home
-
-                        </a>
+                    <li class="nav-item, nav-items">
+                        <a class="nav-link active" aria-current="page" href="index.html"><i class="fa-solid fa-house"></i> Home</a>
                     </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/menu.html">
 
-                            <i class="fa-solid fa-bars"></i> Menu
-                        </a>
+                    <li class="nav-item, nav-items">
+                        <a class="nav-link" href="Html-files/menu.html"><i class="fa-solid fa-bars"></i> Menu</a>
                     </li>
-                    <li class="nav-item dropdown">
+
+
+                    <li class="nav-item dropdown, nav-items">
 
                         <a class="nav-link dropdown-toggle" href="Html-files/services.html" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                             <i class="fa-solid fa-gear"></i> Services
                         </a>
+
                         <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                             <li><a class="dropdown-item" href="#">Ordering options</a></li>
                             <li><a class="dropdown-item" href="#">Order Tracking</a></li>
@@ -114,47 +114,34 @@
                     </li>
 
 
-
-                    </li>
-
-                    <li class="nav-item">
-                        <a class="nav-link" href="#FAQ">FAQS</a>
+                    <li class="nav-item, nav-items">
+                        <a class="nav-link" href="Html-files/contact.html"><i class="fa-solid fa-phone"></i> Contact Us</a>
                     </li>
-                    <li class="nav-item">
-
-                        <a class="nav-link" href="Html-files/contact.html">
-                            <i class="fa-solid fa-phone"></i> Contact Us
 
-                            
-                        </a>
+                    <li class="nav-item, nav-items">
+                        <a class="nav-link" href="Html-files/offers.html"><i class="fa-solid fa-tag"></i> Offers</a>
                     </li>
-
-
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/offers.html">
-
-                            <i class="fa-solid fa-tag"></i> Offers
 
 
-
-
-
-
-
-                        </a>
+                    <li class="nav-item, nav-items">
+                        <a class="nav-link" href="#FAQ">FAQS</a>
                     </li>
-
 
-
-                    <li class="nav-item">
+                  
+                    <li class="nav-item, nav-items">
                         <a class="nav-link" href="Html-files/RateUs.html">
                             <i class="fa-solid fa-star"></i> Rate Us
                         </a>
                     </li>
-
+
+
                 </ul>
             </div>
+
+
+
             <!-- Theme Toggle Icon -->
+
             <div class="order-0 ml-auto p-2">
 
                 <img class="nav-link" src="Images/navbar/moon.png" id="theme-toggle-icon" alt="theme toggler button">
@@ -163,41 +150,22 @@
 
             </div>
 
-            <!-- End Navbar Links -->
-
-
+
             <div class="collapse navbar-collapse hamburgeritems enddiv order-3">
                 <ul class="navbar-nav end-links">
-
-
-
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/login.html">
-
-
-
-                            <i class="fa-solid fa-sign-in"></i> Login
-
-                        </a>
+
+                    <li class="nav-item, nav-items">
+                        <a class="nav-link" href="Html-files/login.html"><i class="fa-solid fa-right-to-bracket"></i> Login</a>
                     </li>
-
 
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/signup.html">
-
-                            <i class="fa-solid fa-user"></i> Sign-Up
-
-
-
-                        </a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/cart.html">
-
-                            Cart <i class="fa-solid fa-cart-shopping"></i>
-
-                        </a>
+                    <li class="nav-item, nav-items">
+                        <a class="nav-link" href="Html-files/signup.html"><i class="fa-solid fa-user"></i> Sign-Up</a> 
+
+                  <li class="nav-item, nav-items">
+                        <a class="nav-link" href="Html-files/cart.html"><i class="fa-solid fa-cart-shopping"></i> Cart</a>
                     </li>
+
+
                 </ul>
             </div>
         </div>