Redesigned Navigation Bar for Improved Functionality and Visibility

index.html

@@ -254,8 +254,8 @@ <h3>
       <header class="locations-head">
         <h2>The Perfect Travel Experience!</h2>
 
-    
-    </script>
+
+
 
     <script src="script.js"></script>
     <header class="main-head">
@@ -264,10 +264,10 @@ <h2>The Perfect Travel Experience!</h2>
       <img src="img/logo.png" id="logo-web">
       <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
     </div>
-
+  
     <!-- Hamburger button for mobile -->
     <button class="hamburger" id="hamburger">☰</button>
-
+    
     <ul id="nav-list">
       <!-- Close button for dropdown -->
       <span class="dropdown-close-btn" id="closeBtn">×</span>
@@ -277,13 +277,11 @@ <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
       <li><a href="#benefits" class="navhover">Benefits</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="./contact.html" class="navhover">Contact</a></li>
       <li><a href="#reviews" class="navhover">Reviews</a></li>
       <li><a href="auth.html" class="navhover">Sign In</a></li>
-
     </ul>
-
+  
     <!-- Toggle Button -->
     <button class="mode-toggle" id="modeToggle">
       <span class="sun-icon glow"><img src="day-mode.png" alt="Light mode"></span>

style.css

@@ -285,8 +285,7 @@ nav {
 
 .logo {
   display: flex;
-  margin-left: 34px;
-
+  margin-left: 3px;
 }
 
 #nav-list {
@@ -324,8 +323,12 @@ nav {
   background-color:white;
   cursor: pointer;
   padding: 5px;
-
 }
+
+.mode-toggle:hover{
+  border-radius: 50px;
+}
+
 .mode-toggle img {
   width: 30px; /* Adjust the size as needed */
   height: auto;
@@ -2049,8 +2052,6 @@ body.light-mode {
   text-decoration: none;
   color: black;
   font-size: 18px;
-  display: inline-block;
-  padding: 10px 15px; /* Adds padding around the text */
   border-radius: 20px; /* Creates rounded corners */
   transition: all 0.3s ease, color 0.3s; /* Smooth transition */
 }