From 7a39ca1390ba08142779943c129346adb1464bc6 Mon Sep 17 00:00:00 2001
From: Sourabh782 <sourabhsinghrawat782@gmail.com>
Date: Thu, 10 Oct 2024 21:22:16 +0530
Subject: [PATCH] fixed responsive issue

---
 index.html | 21 +++++++++++++++------
 style.css  | 18 ++++++++++++------
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index 3c162f03..6284c225 100644
--- a/index.html
+++ b/index.html
@@ -152,6 +152,11 @@
         flex-direction: row;
         align-items: center;
       }
+      #nav-list li a{
+        height: 100%;
+        display: flex;
+        align-items: center;
+      }
     </style>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
   </head>
@@ -254,8 +259,6 @@ <h2>The Perfect Travel Experience!</h2>
       <h1 id="logo">BuddyTrail</h1>
     </div>
 
-    <!-- Hamburger button for mobile -->
-    <button class="hamburger" id="hamburger">☰</button>
 
     <ul id="nav-list">
       <!-- Close button for dropdown -->
@@ -269,10 +272,16 @@ <h1 id="logo">BuddyTrail</h1>
       <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"></span>
-    </button>
+    <div class="toggle-container">
+      
+      <!-- Toggle Button -->
+      <button class="mode-toggle" id="modeToggle">
+        <span class="sun-icon glow"><img src="day-mode.png"></span>
+      </button>
+      
+      <!-- Hamburger button for mobile -->
+      <button class="hamburger" id="hamburger">☰</button>
+    </div>
   </nav>
 </header>
 
diff --git a/style.css b/style.css
index 8a08cc8e..b37fabd0 100644
--- a/style.css
+++ b/style.css
@@ -149,14 +149,20 @@ nav {
   background: none;
   border: none;
   color: white;
-  font-size: 1.5em;
+  /* font-size: 1.5em; */
+  margin-left: 16px;
   cursor: pointer;
+  padding: 0;
+}
+
+.toggle-container{
+  display: flex;
 }
 
 .mode-toggle {
-  position: fixed;
+  /* position: fixed;
   top: 20px;
-  right: 20px;
+  right: 20px; */
   border: none;
   background-color:white;
   cursor: pointer;
@@ -710,16 +716,16 @@ body.dark-mode {
 
 /* Button styles */
 .mode-toggle {
-  position: fixed;
+  /* position: fixed;
   top: 10px;
-  right: 10px;
+  right: 10px; */
   background: none;
   border: none;
   cursor: pointer;
   outline: none;
   font-size: 1.5em;
   transition: color 0.3s, transform 0.3s;
-  padding: 15px;
+  /* padding: 15px; */
 }
 
 /* Sun and moon icons */