webupdate

website/public/assets/css/navbar.css

@@ -405,14 +405,14 @@
   background: #f3f0ff;
 }
 
-/* Responsive Design */
+/* Responsive Design - Mobile & Tablet (up to 1024px includes all iPads) */
 @media (max-width: 1024px) {
   .navbar-menu {
-    display: none;
+    display: none !important;
   }
 
   .mobile-toggle {
-    display: flex;
+    display: flex !important;
   }
   
   .navbar-brand {
@@ -423,6 +423,17 @@
   .navbar-actions {
     margin-left: 16px;
   }
+  
+  /* Wider mobile menu for tablets */
+  .mobile-menu {
+    width: 350px;
+    max-width: 85%;
+  }
+  
+  .mobile-link {
+    padding: 16px 20px;
+    font-size: 17px;
+  }
 }
 
 @media (max-width: 640px) {
@@ -456,13 +467,88 @@
     right: -16px;
   }
 }
+
+/* Tablet-specific (iPad) enhancements - portrait and landscape */
+@media (min-width: 641px) and (max-width: 1024px) {
+  .navbar-wrapper {
+    padding: 0 24px;
+    height: 72px;
+  }
+  
+  .brand-logo {
+    width: 52px;
+    height: 52px;
+  }
+  
+  .brand-name {
+    font-size: 20px;
+  }
+  
+  /* Larger hamburger menu for tablets */
+  .mobile-toggle {
+    width: 48px;
+    height: 48px;
+    padding: 12px;
+  }
+  
+  .toggle-line {
+    width: 26px;
+    height: 3px;
+  }
+  
+  /* Wider mobile menu for tablets */
+  .mobile-menu {
+    width: 380px;
+    max-width: 75%;
+    padding: 24px;
+  }
+  
+  .mobile-menu-header {
+    padding-bottom: 20px;
+    margin-bottom: 28px;
+  }
+  
+  .mobile-brand {
+    font-size: 20px;
+  }
+  
+  .mobile-close {
+    font-size: 28px;
+    width: 44px;
+    height: 44px;
+  }
+  
+  .mobile-link {
+    padding: 18px 24px;
+    font-size: 18px;
+    border-radius: 10px;
+  }
+  
+  .mobile-menu-list li {
+    margin-bottom: 6px;
+  }
+  
+  /* Larger action buttons for tablets */
+  .action-btn {
+    width: 48px;
+    height: 48px;
+    font-size: 24px;
+  }
+  
+  .action-badge {
+    min-width: 20px;
+    height: 20px;
+    font-size: 12px;
+  }
+}
+
 /**
  * Mobile Navbar Fixes
- * Ensures hamburger menu, cart, and wishlist are visible on mobile devices
+ * Ensures hamburger menu, cart, and wishlist are visible on mobile/tablet devices
  */
 
-/* Mobile hamburger menu - always visible on small screens */
-@media (max-width: 768px) {
+/* Mobile/Tablet hamburger menu - visible on screens up to 1024px (includes iPads) */
+@media (max-width: 1024px) {
   .mobile-toggle {
     display: flex !important;
     flex-direction: column;
@@ -676,8 +762,17 @@
   }
 }
 
-/* Tablet adjustments */
-@media (min-width: 769px) and (max-width: 1024px) {
+/* Desktop - hide mobile elements (only on screens larger than 1024px) */
+@media (min-width: 1025px) {
+  .mobile-toggle {
+    display: none !important;
+  }
+
+  .mobile-menu,
+  .mobile-menu-overlay {
+    display: none !important;
+  }
+
   .navbar-actions {
     gap: 16px;
   }
@@ -691,18 +786,6 @@
   }
 }
 
-/* Desktop - hide mobile elements */
-@media (min-width: 769px) {
-  .mobile-toggle {
-    display: none !important;
-  }
-
-  .mobile-menu,
-  .mobile-menu-overlay {
-    display: none !important;
-  }
-}
-
 /* Accessibility improvements */
 .action-btn:focus,
 .mobile-toggle:focus,