Merge pull request #297 from Sushil010/fix/navbar-alignment

Fix: Signup button at navbar has been fixed

Author: Ctoic

index.html

@@ -102,7 +102,7 @@
         </a>
 
         <div id="menu"
-          class="fixed inset-0 bg-gray-900 w-full h-full flex flex-col items-center justify-center space-y-8 transform scale-0 transition-transform duration-300 ease-in-out lg:relative lg:flex lg:items-end lg:justify-end lg:space-y-0 lg:bg-transparent lg:scale-100 lg:flex-row lg:space-x-4 z-20">
+          class="fixed inset-0 bg-gray-900 w-full h-full flex flex-col items-center justify-center space-y-8 transform scale-0 transition-transform duration-300 ease-in-out lg:relative lg:flex lg:items-center lg:justify-end lg:space-y-0 lg:bg-transparent lg:scale-100 lg:flex-row lg:space-x-4 z-20">
           <div id="menu-close" class="text-gray-300 lg:hidden absolute top-5 right-5 cursor-pointer">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
               stroke="currentColor">
@@ -115,30 +115,30 @@
           <a href="./about.html" class="text-gray-300 hover:text-green-500" id="about" data-translate="nav-about"><i class="fa-solid fa-address-card"></i> About</a>
           <a href="./contact.html" class="text-gray-300 hover:text-green-500" data-translate="nav-contact"><i class="fa-solid fa-phone"></i> Contact</a>
           <a href="./faq.html" class="text-gray-300 hover:text-green-500" data-translate="nav-faqs"><i class="fa-solid fa-circle-question"></i> FAQs</a> -->
-          <!-- added icons by dodithakur  -->
-          <a href="./index.html" class="text-gray-300 hover:text-green-500">
+          <!-- Navigation Links - Horizontal Layout -->
+          <a href="./index.html" class="text-gray-300 hover:text-green-500 flex items-center gap-2">
             <i class="fa-solid fa-house"></i> Home
           </a>
 
-<a href="./explore.html" class="text-gray-300 hover:text-green-500" id="explore" >
-   <i class="fa-solid fa-magnifying-glass"></i> Explore
-</a>
+          <a href="./explore.html" class="text-gray-300 hover:text-green-500 flex items-center gap-2" id="explore">
+            <i class="fa-solid fa-magnifying-glass"></i> Explore
+          </a>
 
-<a href="./scan.html" class="text-gray-300 hover:text-green-500">
-  <i class="fa-solid fa-book-open-reader"></i> Scan Book
-</a>
+          <a href="./scan.html" class="text-gray-300 hover:text-green-500 flex items-center gap-2">
+            <i class="fa-solid fa-book-open-reader"></i> Scan Book
+          </a>
 
-<a href="./about.html" class="text-gray-300 hover:text-green-500" id="about" >
-  <i class="fa-solid fa-address-card"></i> About
-</a>
+          <a href="./about.html" class="text-gray-300 hover:text-green-500 flex items-center gap-2" id="about">
+            <i class="fa-solid fa-address-card"></i> About
+          </a>
 
-<a href="./contact.html" class="text-gray-300 hover:text-green-500">
-  <i class="fa-solid fa-phone"></i> Contact
-</a>
+          <a href="./contact.html" class="text-gray-300 hover:text-green-500 flex items-center gap-2">
+            <i class="fa-solid fa-phone"></i> Contact
+          </a>
 
-<a href="./faq.html" class="text-gray-300 hover:text-green-500" >
-  <i class="fa-solid fa-circle-question"></i> FAQs
-</a>
+          <a href="./faq.html" class="text-gray-300 hover:text-green-500 flex items-center gap-2">
+            <i class="fa-solid fa-circle-question"></i> FAQs
+          </a>
 
           <!-- Profile Icon and Theme Toggle -->
           <button id="theme-toggle" class="text-gray-300 hover:text-green-500">
@@ -164,21 +164,22 @@
           <a href="./profile.html" class="text-gray-300 hover:text-green-500 me-4">
             <i class="bi bi-person-circle h-6 w-6"></i>
           </a>
-        </div>
 
-        <div class="language-selector me-3">
-               <i class="fa-solid fa-language"></i>
-          <select id="language" onchange="changeLanguage()" class="bg-gray-700 text-gray-300 border border-gray-600 rounded px-3 py-2 focus:outline-none focus:border-green-500"> 
-            <option value="en">English</option>
-            <option value="fr">Français</option>
-            <option value="es">Español</option>
-            <option value="zh">简体中文</option>
-          </select>
-        </div>
+          <!-- Language Selector -->
+          <div class="language-selector me-3">
+            <i class="fa-solid fa-language"></i>
+            <select id="language" onchange="changeLanguage()" class="bg-gray-700 text-gray-300 border border-gray-600 rounded px-3 py-2 focus:outline-none focus:border-green-500"> 
+              <option value="en">English</option>
+              <option value="fr">Français</option>
+              <option value="es">Español</option>
+              <option value="zh">简体中文</option>
+            </select>
+          </div>
 
-        <!-- Signup button -->
-        <div class="flex-shrink-0">
-          <button id="signupButton" class="w-24 text-white bg-transparent border-2 border-green-600 focus:border-green-700 rounded-full py-2 px-4 hover:-translate-y-0.5 transition-all duration-300 text-sm"><i class="fa-regular fa-circle-user"></i> Sign up</button>
+          <!-- Signup button -->
+          <div class="flex-shrink-0">
+            <button id="signupButton" class="text-white bg-transparent border-2 border-green-600 focus:border-green-700 rounded-full py-2 px-4 hover:-translate-y-0.5 transition-all duration-300 text-sm whitespace-nowrap"><i class="fa-regular fa-circle-user"></i> Sign up</button>
+          </div>
         </div>
 
         <!-- Mobile Menu Toggle Button -->

style.css

@@ -138,14 +138,24 @@ li:hover {
 }
 
 .language-selector {
-  margin: 20px;
+  margin: 0;
   position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 10px;
 }
 
-.language-selector select {
-  padding: 12px 16px;
+.language-selector i {
   font-size: 16px;
-  border-radius: 25px;
+  color: #9ca3af;
+}
+
+.language-selector select {
+  padding: 8px 12px;
+  font-size: 14px;
+  border-radius: 20px;
   font-weight: 500;
   border: 2px solid #1db954;
   background-color: #1db954;
@@ -155,9 +165,9 @@ li:hover {
   appearance: none; /* Remove default arrow */
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>');
   background-repeat: no-repeat;
-  background-position: right 10px center;
-  background-size: 20px;
-  padding-right: 40px; /* Space for the icon */
+  background-position: right 8px center;
+  background-size: 16px;
+  padding-right: 32px; /* Space for the icon */
 }
 
 .language-selector select:hover {
@@ -954,10 +964,10 @@ header {
   gap: 1.25rem; /* 20px between items */
 }
 
-/* Subtle upward nudge for desktop alignment */
+/* Remove any margin adjustments that cause misalignment */
 @media (min-width: 1024px) {
   #menu {
-    margin-top: -4px;
+    margin-top: 0;
   }
 }
 
@@ -973,6 +983,30 @@ header {
   border-radius: 10px;
   line-height: 1;
   transition: color 0.2s ease, background-color 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Ensure proper alignment for all menu elements */
+#menu .language-selector,
+#menu .flex-shrink-0,
+#menu #theme-toggle,
+#menu a[href="./profile.html"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Ensure theme toggle and profile icon have consistent sizing */
+#menu #theme-toggle {
+  padding: 8px;
+  border-radius: 10px;
+}
+
+#menu a[href="./profile.html"] {
+  padding: 8px;
+  border-radius: 10px;
 }
 
 #menu a:hover,