Merge pull request khushi-joshi-05#1468 from aslams2020/TextReadability

✔️Resolved Text-Readability Issue in Navbar
sohinirathor2004 · Jul 25, 2024 · 9f1cf4e · 9f1cf4e
2 parents 5a648ed + e90bf90
commit 9f1cf4e
Show file tree

Hide file tree

Showing 7 changed files with 243 additions and 21 deletions.
diff --git a/Html-files/RateUs.html b/Html-files/RateUs.html
@@ -17,6 +17,39 @@
     <link rel="stylesheet" href="../Css-files/RateUs.css" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css" />
     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+    <style>
+
+.center-links .nav-item .dropdown-menu {
+  background-color:#212123;
+  color: white;
+  border-radius: 0;
+  border: none;
+  padding-top: 0;
+}
+
+.center-links .nav-item .dropdown-menu {
+  background-color: #ffffff;
+  color: white;
+  border-radius: 0;
+  border: none;
+  padding-top: 0;
+}
+
+.dropdown-item:hover {
+  background-color: #58a9ff;
+  color: #fff;
+  transform: scale(1.1);
+}
+
+.dropdown-item {
+  padding: 4px 8px;
+  color: white;
+  font-size: 15px;
+  background-color: #137cbd;
+  transition: background-color 0.3s, transform 0.3s;
+
+}
+    </style>
 </head>
 <body>
     <nav class="navbar navbar-expand-lg fixed-top">
@@ -50,18 +83,15 @@
                         </a>
                     </li>
                     <li class="nav-item dropdown">
-                        <a
-                            class="nav-link services"
-                            href="../Html-files/services.html"
-                            aria-expanded="false"
-                        >
-                            <i class="fas fa-cogs"></i> Services
+
+                        <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">
-                            <li><a class="dropdown-item" href="#"><i class="fas fa-clipboard-list"></i> Ordering options</a></li>
-                            <li><a class="dropdown-item" href="#"><i class="fas fa-shipping-fast"></i> Order Tracking</a></li>
-                            <li><a class="dropdown-item" href="#"><i class="fas fa-headset"></i> Customer Support</a></li>
-                            <li><a class="dropdown-item" href="#"><i class="fas fa-question-circle"></i> FAQS</a></li>
+                        <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>
+                            <li><a class="dropdown-item" href="#">Customer Support</a></li>
+                            <li><a class="dropdown-item" href="#">FAQS</a></li>
                         </ul>
                     </li>
                     <li class="nav-item">

diff --git a/Html-files/contact.html b/Html-files/contact.html
@@ -52,6 +52,37 @@
             background-color: #e21f1f;
             z-index: 9999;
         }
+
+.center-links .nav-item .dropdown-menu {
+  background-color:#212123;
+  color: white;
+  border-radius: 0;
+  border: none;
+  padding-top: 0;
+}
+
+.center-links .nav-item .dropdown-menu {
+  background-color: #ffffff;
+  color: white;
+  border-radius: 0;
+  border: none;
+  padding-top: 0;
+}
+
+.dropdown-item:hover {
+  background-color: #58a9ff;
+  color: #fff;
+  transform: scale(1.1);
+}
+
+.dropdown-item {
+  padding: 4px 8px;
+  color: white;
+  font-size: 15px;
+  background-color: #137cbd;
+  transition: background-color 0.3s, transform 0.3s;
+
+}
     </style>
   </head>
 

diff --git a/Html-files/login.html b/Html-files/login.html
@@ -34,6 +34,38 @@
             background-color: #e21f1f;
             z-index: 9999;
         }
+
+		.center-links .nav-item .dropdown-menu {
+  background-color:#212123;
+  color: white;
+  border-radius: 0;
+  border: none;
+  padding-top: 0;
+}
+
+.center-links .nav-item .dropdown-menu {
+  background-color: #ffffff;
+  color: white;
+  border-radius: 0;
+  border: none;
+  padding-top: 0;
+}
+
+.dropdown-item:hover {
+  background-color: #58a9ff;
+  color: #fff;
+  transform: scale(1.1);
+}
+
+.dropdown-item {
+  padding: 4px 8px;
+  color: white;
+  font-size: 15px;
+  background-color: #137cbd;
+  transition: background-color 0.3s, transform 0.3s;
+
+} 
+
 	</style>
 </head>
 

diff --git a/Html-files/menu.html b/Html-files/menu.html
@@ -48,6 +48,38 @@
             background-color: #e21f1f;
             z-index: 9999;
         }
+
+.center-links .nav-item .dropdown-menu {
+  background-color:#212123;
+  color: white;
+  border-radius: 0;
+  border: none;
+  padding-top: 0;
+}
+
+.center-links .nav-item .dropdown-menu {
+  background-color: #ffffff;
+  color: white;
+  border-radius: 0;
+  border: none;
+  padding-top: 0;
+}
+
+.dropdown-item:hover {
+  background-color: #58a9ff;
+  color: #fff;
+  transform: scale(1.1);
+}
+
+.dropdown-item {
+  padding: 4px 8px;
+  color: white;
+  font-size: 15px;
+  background-color: #137cbd;
+  transition: background-color 0.3s, transform 0.3s;
+
+}
+
     </style>
   </head>
 
@@ -86,16 +118,18 @@
                     </a>
                 </li>
                 <li class="nav-item dropdown">
-                    <a class="nav-link services" href="../Html-files/services.html" aria-expanded="false">
-                        <i class="fa-solid fa-handshake"></i> Services
-                    </a>
-                    <ul class="dropdown-menu">
-                        <li><a class="dropdown-item" href="#"><i class="fa-solid fa-check"></i> Ordering options</a></li>
-                        <li><a class="dropdown-item" href="#"><i class="fa-solid fa-truck"></i> Order Tracking</a></li>
-                        <li><a class="dropdown-item" href="#"><i class="fa-solid fa-headset"></i> Customer Support</a></li>
-                        <li><a class="dropdown-item" href="#"><i class="fa-solid fa-question"></i> FAQS</a></li>
-                    </ul>
-                </li>
+
+                  <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>
+                      <li><a class="dropdown-item" href="#">Customer Support</a></li>
+                      <li><a class="dropdown-item" href="#">FAQS</a></li>
+                  </ul>
+              </li>
+
                 <li class="nav-item">
                     <a class="nav-link" href="../Html-files/contact.html">
                         <i class="fa-solid fa-envelope"></i> Contact Us

diff --git a/Html-files/offers.html b/Html-files/offers.html
@@ -98,6 +98,38 @@
     right: 24px;
   }
 }
+
+
+.center-links .nav-item .dropdown-menu {
+  background-color:#212123;
+  color: white;
+  border-radius: 0;
+  border: none;
+  padding-top: 0;
+}
+
+.center-links .nav-item .dropdown-menu {
+  background-color: #ffffff;
+  color: white;
+  border-radius: 0;
+  border: none;
+  padding-top: 0;
+}
+
+.dropdown-item:hover {
+  background-color: #58a9ff;
+  color: #fff;
+  transform: scale(1.1);
+}
+
+.dropdown-item {
+  padding: 4px 8px;
+  color: white;
+  font-size: 15px;
+  background-color: #137cbd;
+  transition: background-color 0.3s, transform 0.3s;
+
+}
     </style>
   </head>
 

diff --git a/Html-files/services.html b/Html-files/services.html
@@ -52,6 +52,37 @@
             background-color: #e21f1f;
             z-index: 9999;
         }
+
+.center-links .nav-item .dropdown-menu {
+  background-color:#212123;
+  color: white;
+  border-radius: 0;
+  border: none;
+  padding-top: 0;
+}
+
+.center-links .nav-item .dropdown-menu {
+  background-color: #ffffff;
+  color: white;
+  border-radius: 0;
+  border: none;
+  padding-top: 0;
+}
+
+.dropdown-item:hover {
+  background-color: #58a9ff;
+  color: #fff;
+  transform: scale(1.1);
+}
+
+.dropdown-item {
+  padding: 4px 8px;
+  color: white;
+  font-size: 15px;
+  background-color: #137cbd;
+  transition: background-color 0.3s, transform 0.3s;
+
+}
     </style>
   </head>
 

diff --git a/Html-files/signup.html b/Html-files/signup.html
@@ -34,6 +34,38 @@
             background-color: #e21f1f;
             z-index: 9999;
         }
+
+		.center-links .nav-item .dropdown-menu {
+  background-color:#212123;
+  color: white;
+  border-radius: 0;
+  border: none;
+  padding-top: 0;
+}
+
+.center-links .nav-item .dropdown-menu {
+  background-color: #ffffff;
+  color: white;
+  border-radius: 0;
+  border: none;
+  padding-top: 0;
+}
+
+.dropdown-item:hover {
+  background-color: #58a9ff;
+  color: #fff;
+  transform: scale(1.1);
+}
+
+.dropdown-item {
+  padding: 4px 8px;
+  color: white;
+  font-size: 15px;
+  background-color: #137cbd;
+  transition: background-color 0.3s, transform 0.3s;
+
+}
+
 	</style>
 </head>