commit 1234567890abcdef1234567890abcdef12345678

Author: atonixdev

frontend/src/components/Layout/Header.js

@@ -431,7 +431,7 @@ const Header = () => {
 
       {/* ══ TOP UTILITY HEADER (Tier 1) ═══════════════════════ */}
       <div
-        className="hidden md:block"
+        className="hidden md:block header-utility-bar"
         style={{
           height: 40,
           background: '#02010a',
@@ -684,7 +684,7 @@ const Header = () => {
           </Link>
 
           {/* Desktop Navigation */}
-          <div className="hidden md:flex items-center" style={{ gap: 0, position: 'absolute', left: '50%', transform: 'translateX(-50%)' }}>
+          <div className="hidden md:flex items-center header-desktop-nav" style={{ gap: 0, position: 'absolute', left: '50%', transform: 'translateX(-50%)' }}>
             {navigation.map((item, index) => (
               <div
                 key={item.name}
@@ -726,7 +726,7 @@ const Header = () => {
 
           {/* Mobile hamburger */}
           <button
-            className="flex md:hidden"
+            className="flex md:hidden header-mobile-toggle"
             onClick={() => setIsMenuOpen(!isMenuOpen)}
             style={{
               background: 'none', border: 'none', cursor: 'pointer',

frontend/src/index.css

@@ -422,6 +422,26 @@ code, pre, kbd, samp {
   .grid { width: 100%; }
 }
 
+@media (max-width: 1100px) {
+  .header-utility-bar {
+    display: none !important;
+  }
+
+  .header-desktop-nav {
+    display: none !important;
+  }
+
+  .header-mobile-toggle {
+    display: flex !important;
+  }
+}
+
+@media (min-width: 1101px) {
+  .header-mobile-toggle {
+    display: none !important;
+  }
+}
+
 /* ── Legacy / backward-compat for classes still used ─────── */
 .animate-fade-in-up  { animation: fadeInUp 0.6s ease forwards; }
 .animate-slide-in-up { animation: fadeInUp 0.6s ease forwards; }