Update Navbar

PriyaGhosal · Nov 3, 2024 · 2b6b9a6 · 2b6b9a6
1 parent c1d7cf8
commit 2b6b9a6
Show file tree

Hide file tree

Showing 7 changed files with 142 additions and 53 deletions.
diff --git a/F&Q.html b/F&Q.html
@@ -285,20 +285,23 @@ <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
       <nav>
         <ul id="nav-list">
           <span class="dropdown-close-btn" id="closeBtn">×</span>
-          <li><a href="index.html" class="navhover">Home</a></li>
-          <li><a href="team.html" class="navhover">Team</a></li>
+          <li><a href="index.html" class="navhover">Home</a></li> 
           <li>
             <a href="index.html#deals" class="navhover">Exclusive Deals</a>
-          </li>
-          <li><a href="index.html#benefits" class="navhover">Benefits</a></li>
-          <li><a href="about.html" class="navhover">About</a></li>
-          <li>
-            <a href="index.html#itineraries" class="navhover"
-              >Travel Itineraries</a
-            >
-          </li>
+          </li> 
+          <li><a href="about.html" class="navhover">About</a></li> 
           <li><a href="./contact.html" class="navhover">Contact</a></li>
           <li><a href="index.html#reviews" class="navhover">Reviews</a></li>
+           <!-- Single dropdown for Explore -->
+        <li class="dropdown">
+          <a href="#" class="navhover">Explore</a>
+          <ul class="dropdown-menu">
+            <li><a href="team.html">Team</a></li>
+            <li><a href="blog.html">Blogs</a></li>
+            <li><a href="#itineraries">Travel Itineraries</a></li>
+            <li><a href="F&Q.html">FAQ</a></li>
+          </ul>
+        </li>
           <li><a href="auth.html" class="navhover">Sign In</a></li>
         </ul>
       </nav>

diff --git a/about.html b/about.html
@@ -10,8 +10,7 @@
 
     <link rel="icon" href="/icons/airplane.svg" />
     <link rel="icon" href="https://img.icons8.com/?size=100&id=11808&format=png&color=000000">
- main
- main
+
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
 <style>
           /* circle styles */
@@ -28,12 +27,11 @@
           }
         </style>  
     </head>
-
- main
+
 
 
     <link rel="stylesheet" href= "style.css" />
- main
+
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
 </head>
 
@@ -170,15 +168,21 @@ <h1 id="logo"><a href="index.html">BuddyTrail</a></h1>
     <ul id="nav-list">
       <!-- Close button for dropdown -->
       <span class="dropdown-close-btn" id="closeBtn">×</span>
-      <li><a href="index.html" class="navhover">Home</a></li>
-      <li><a href="team.html" class="navhover">Team</a></li>
-      <li><a href="index.html#deals" class="navhover">Exclusive Deals</a></li>
-      <li><a href="blog.html" class="navhover">Blogs</a></li>
-      <li><a href="about.html" class="navhover">About</a></li>
-      <li><a href="index.html#itineraries" class="navhover">Travel Itineraries</a></li>
-      <li><a href="F&Q.html" class="navhover">FAQ</a></li>
+      <li><a href="index.html" class="navhover">Home</a></li> 
+      <li><a href="index.html#deals" class="navhover">Exclusive Deals</a></li> 
+      <li><a href="about.html" class="navhover">About</a></li>  
       <li><a href="./contact.html" class="navhover">Contact</a></li>
       <li><a href="index.html#reviews" class="navhover">Reviews</a></li>
+       <!-- Single dropdown for Explore -->
+       <li class="dropdown">
+        <a href="#" class="navhover">Explore</a>
+        <ul class="dropdown-menu">
+          <li><a href="team.html">Team</a></li>
+          <li><a href="blog.html">Blogs</a></li>
+          <li><a href="#itineraries">Travel Itineraries</a></li>
+          <li><a href="F&Q.html">FAQ</a></li>
+        </ul>
+      </li>
       <li><a href="auth.html" class="navhover">Sign In</a></li>
 
     </ul>

diff --git a/blog.html b/blog.html
@@ -633,20 +633,23 @@ <h1 id="logo"><a href="index.html">BuddyTrail</a></h1>
         <nav>
           <ul id="nav-list">
             <span class="dropdown-close-btn" id="closeBtn">×</span>
-            <li><a href="index.html" class="navhover">Home</a></li>
-            <li><a href="team.html" class="navhover">Team</a></li>
+            <li><a href="index.html" class="navhover">Home</a></li> 
             <li>
               <a href="index.html#deals" class="navhover">Exclusive Deals</a>
-            </li>
-            <li><a href="index.html#benefits" class="navhover">Benefits</a></li>
-            <li><a href="about.html" class="navhover">About</a></li>
-            <li>
-              <a href="index.html#itineraries" class="navhover"
-                >Travel Itineraries</a
-              >
-            </li>
+            </li> 
+            <li><a href="about.html" class="navhover">About</a></li> 
             <li><a href="./contact.html" class="navhover">Contact</a></li>
             <li><a href="index.html#reviews" class="navhover">Reviews</a></li>
+             <!-- Single dropdown for Explore -->
+        <li class="dropdown">
+            <a href="#" class="navhover">Explore</a>
+            <ul class="dropdown-menu">
+              <li><a href="team.html">Team</a></li>
+              <li><a href="blog.html">Blogs</a></li>
+              <li><a href="#itineraries">Travel Itineraries</a></li>
+              <li><a href="F&Q.html">FAQ</a></li>
+            </ul>
+          </li>
             <li><a href="auth.html" class="navhover">Sign In</a></li>
           </ul>
         </nav>

diff --git a/contact.html b/contact.html
@@ -183,15 +183,22 @@ <h1 id="logo"><a href="#home" style="margin-left: 18px; margin-top: 5px;">BuddyT
             <ul id="nav-list" style="margin-left: 65px;">
               <!-- Close button for dropdown -->
               <span class="dropdown-close-btn" id="closeBtn">×</span>
-              <li><a href="./index.html" class="navhover">Home</a></li>
-              <li><a href="team.html" class="navhover">Team</a></li>
-              <li><a href="index.html#deals" class="navhover">Exclusive Deals</a></li>
-              <li><a href="index.html#benefits" class="navhover">Benefits</a></li>
-              <li><a href="about.html" class="navhover">About</a></li>
-              <li><a href="index.html#itineraries" class="navhover">Travel Itineraries</a></li>
+              <li><a href="./index.html" class="navhover">Home</a></li> 
+              <li><a href="index.html#deals" class="navhover">Exclusive Deals</a></li> 
+              <li><a href="about.html" class="navhover">About</a></li> 
 
               <li><a href="./contact.html" class="navhover">Contact</a></li>
               <li><a href="index.html#reviews" class="navhover">Reviews</a></li>
+               <!-- Single dropdown for Explore -->
+              <li class="dropdown">
+                <a href="#" class="navhover">Explore</a>
+                <ul class="dropdown-menu">
+                  <li><a href="team.html">Team</a></li>
+                  <li><a href="blog.html">Blogs</a></li>
+                  <li><a href="#itineraries">Travel Itineraries</a></li>
+                  <li><a href="F&Q.html">FAQ</a></li>
+                </ul>
+              </li>
               <li><a href="auth.html" class="navhover">Sign In</a></li>
             </ul>
 

diff --git a/index.html b/index.html
@@ -542,15 +542,21 @@ <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
     <ul id="nav-list">
       <!-- Close button for dropdown -->
       <span class="dropdown-close-btn" id="closeBtn">×</span>
-      <li><a href="#home" class="navhover">Home</a></li>
-      <li><a href="team.html" class="navhover">Team</a></li>
-      <li><a href="#deals" class="navhover">Exclusive Deals</a></li>
-      <li><a href="blog.html" class="navhover">Blogs</a></li>
-      <li><a href="about.html" class="navhover">About</a></li>
-      <li><a href="#itineraries" class="navhover">Travel Itineraries</a></li>
-      <li><a href="F&Q.html" class="navhover">FAQ</a></li>
+      <li><a href="#home" class="navhover">Home</a></li> 
+      <li><a href="#deals" class="navhover">Exclusive Deals</a></li> 
+      <li><a href="about.html" class="navhover">About</a></li> 
       <li><a href="./contact.html" class="navhover">Contact</a></li>
       <li><a href="#reviews" class="navhover">Reviews</a></li>
+       <!-- Single dropdown for Explore -->
+        <li class="dropdown">
+          <a href="#" class="navhover">Explore</a>
+          <ul class="dropdown-menu">
+            <li><a href="team.html">Team</a></li>
+            <li><a href="blog.html">Blogs</a></li>
+            <li><a href="#itineraries">Travel Itineraries</a></li>
+            <li><a href="F&Q.html">FAQ</a></li>
+          </ul>
+        </li>
       <li><a href="auth.html" class="navhover">Sign In</a></li>
 
     </ul>

diff --git a/style.css b/style.css
@@ -350,10 +350,10 @@ nav {
   display: flex;
 }
 
-#nav-list {
+/* #nav-list {
   list-style: none;
   align-items: center;
-}
+} */
 
 #nav-list li a {
   color: white;
@@ -362,6 +362,65 @@ nav {
   white-space: nowrap;
   font-size: 1.8rem;
 }
+/* Style the navigation list */
+#nav-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex; 
+  align-items: center;
+}
+
+#nav-list li {
+  position: relative;
+  margin-right: 20px;
+}
+
+/* Style dropdown menu */
+.dropdown-menu {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: #050b0d98; /* Adjust as needed */
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  list-style: none;
+  padding: 10px 0;
+  margin: 0;
+  min-width: 180px;
+}
+
+.dropdown-menu li {
+  width: 100%;
+}
+
+.dropdown-menu li a {
+  padding: 10px 20px;
+  display: block;
+  color: #333; /* Adjust text color */
+  text-decoration: none;
+}
+
+.dropdown-menu li a:hover {
+  background-color: #232121; /* Highlight color on hover */
+}
+
+/* Show dropdown menu on hover */
+.dropdown:hover .dropdown-menu {
+  display: block;
+}
+
+/* General styling for nav links */
+.navhover {
+  text-decoration: none;
+  color: #333; /* Adjust as needed */
+  padding: 10px 20px;
+}
+
+.navhover:hover {
+  color: #007BFF; /* Adjust hover color */
+}
 
 .hamburger {
   display: none; /* Hidden on larger screens */

diff --git a/team.html b/team.html
@@ -390,15 +390,22 @@ <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
 
           <ul id="nav-list">
             <!-- Close button for dropdown -->
-            <li><a href="index.html" class="navhover">Home</a></li>
-            <li><a href="team.html" class="navhover">Team</a></li>
-            <li><a href="index.html#deals" class="navhover">Exclusive Deals</a></li>
-            <li><a href="index.html#benefits" class="navhover">Benefits</a></li>
-            <li><a href="about.html" class="navhover">About</a></li>
-            <li><a href="index.html#itineraries" class="navhover">Travel Itineraries</a></li>
+            <li><a href="index.html" class="navhover">Home</a></li> 
+            <li><a href="index.html#deals" class="navhover">Exclusive Deals</a></li> 
+            <li><a href="about.html" class="navhover">About</a></li> 
 
             <li><a href="./contact.html" class="navhover">Contact</a></li>
             <li><a href="index.html#reviews" class="navhover">Reviews</a></li>
+             <!-- Single dropdown for Explore -->
+            <li class="dropdown">
+              <a href="#" class="navhover">Explore</a>
+              <ul class="dropdown-menu">
+                <li><a href="team.html">Team</a></li>
+                <li><a href="blog.html">Blogs</a></li>
+                <li><a href="#itineraries">Travel Itineraries</a></li>
+                <li><a href="F&Q.html">FAQ</a></li>
+              </ul>
+            </li>
             <li><a href="auth.html" class="navhover">Sign In</a></li>
 
           </ul>