Fix header mobile UI with dropdown navigation

- Add proper header-container with max-width and centering
- Implement mobile hamburger navigation that opens as dropdown
- Keep navigation links on left side with logo on desktop
- Add mobile navigation JavaScript with auto-close functionality
- Improve mobile typography and spacing for 768px and 480px breakpoints
- Position mobile navigation absolutely below header with shadow
- Include header.css in base template

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

static/css/header.css

@@ -1,21 +1,29 @@
 /* Header Styles for NetCop Hub */
 .header {
     background: white;
-    padding: 12px 24px;
+    padding: 12px 0;
     border-radius: 0;
     margin-bottom: 0;
     box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    border-bottom: 1px solid #e5e7eb;
+    position: relative;
+}
+
+.header-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 24px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
-    border-bottom: 1px solid #e5e7eb;
 }
 
 .header-left {
     display: flex;
     align-items: center;
     gap: 40px;
+    flex: 1;
 }
 
 .logo-section {
@@ -93,6 +101,7 @@
     align-items: center;
     gap: 15px;
     flex-wrap: wrap;
+    flex-shrink: 0;
 }
 
 .user-welcome {
@@ -149,41 +158,110 @@
     background: rgba(239, 68, 68, 0.05);
 }
 
+/* Mobile Navigation Toggle */
+.mobile-nav-toggle {
+    display: none;
+    background: none;
+    border: none;
+    font-size: 24px;
+    color: #6b7280;
+    cursor: pointer;
+    padding: 8px;
+    margin-left: auto;
+}
+
+.mobile-nav-toggle:hover {
+    color: #3b82f6;
+}
+
 /* Responsive Design */
 @media (max-width: 768px) {
-    .header {
+    .header-container {
-        flex-direction: column;
+        padding: 0 16px;
-        gap: 15px;
-        text-align: center;
     }
     
     .header-left {
-        justify-content: center;
+        justify-content: space-between;
+        gap: 16px;
     }
     
-    .logo-subtitle {
+    .logo-section {
-        display: none;
+        flex-shrink: 0;
+    }
+    
+    .mobile-nav-toggle {
+        display: block;
     }
     
     .header-nav {
-        flex-wrap: wrap;
+        display: none;
-        justify-content: center;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: white;
+        flex-direction: column;
+        gap: 8px;
+        padding: 16px 24px;
+        border-top: 1px solid #e5e7eb;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        z-index: 1000;
+    }
+    
+    .header-nav.mobile-open {
+        display: flex;
+    }
+    
+    .nav-link {
+        padding: 12px 16px;
+        text-align: center;
+        border-radius: 8px;
+        background: rgba(59, 130, 246, 0.05);
+        margin: 2px 0;
     }
     
     .user-info {
         justify-content: center;
+        gap: 12px;
+        width: 100%;
+        padding-top: 8px;
+        border-top: 1px solid #e5e7eb;
+    }
+    
+    .user-welcome {
+        font-size: 14px;
+        white-space: nowrap;
+    }
+    
+    .balance {
+        font-size: 13px;
+        padding: 6px 12px;
     }
     
     .auth-links {
         flex-wrap: wrap;
         justify-content: center;
+        gap: 8px;
+    }
+    
+    .auth-links a {
+        padding: 8px 16px;
+        border-radius: 8px;
+        background: rgba(107, 114, 128, 0.05);
+        font-size: 14px;
     }
 }
 
 @media (max-width: 480px) {
+    .header-container {
+        padding: 0 12px;
+        gap: 12px;
+    }
+    
     .header-left {
-        flex-direction: column;
+        flex-direction: row;
-        gap: 10px;
+        justify-content: space-between;
+        align-items: center;
     }
     
     .logo-img {
@@ -192,15 +270,32 @@
     }
     
     .logo-title {
-        font-size: 18px;
+        font-size: 16px;
     }
     
-    .header-nav {
+    .user-info {
-        gap: 10px;
+        flex-direction: column;
+        gap: 8px;
+        align-items: center;
     }
     
-    .nav-link {
+    .user-welcome {
-        padding: 6px 10px;
+        font-size: 13px;
-        font-size: 14px;
+        text-align: center;
+    }
+    
+    .balance {
+        font-size: 12px;
+        padding: 5px 10px;
+        border-radius: 16px;
+    }
+    
+    .auth-links {
+        gap: 6px;
+    }
+    
+    .auth-links a {
+        padding: 6px 12px;
+        font-size: 13px;
     }
 }

templates/base.html

@@ -8,6 +8,7 @@
     
     <!-- Base Styles -->
     <link rel="stylesheet" href="{% static 'css/base.css' %}">
+    <link rel="stylesheet" href="{% static 'css/header.css' %}">
     
     {% block extra_css %}{% endblock %}
 </head>
@@ -19,11 +20,14 @@
                 <a href="{% url 'core:homepage' %}" class="logo-section">
                     <img src="{% static 'img/logo.png' %}" alt="NetCop Hub" class="logo-img">
                 </a>
-                <nav class="header-nav">
+                <nav class="header-nav" id="header-nav">
                     <a href="{% url 'core:homepage' %}" class="nav-link {% if request.resolver_match.url_name == 'homepage' %}active{% endif %}">Home</a>
                     <a href="{% url 'core:marketplace' %}" class="nav-link {% if request.resolver_match.url_name == 'marketplace' %}active{% endif %}">AI Marketplace</a>
                     <a href="{% url 'core:pricing' %}" class="nav-link {% if request.resolver_match.url_name == 'pricing' %}active{% endif %}">Pricing</a>
                 </nav>
+                <button class="mobile-nav-toggle" onclick="toggleMobileNav()" aria-label="Toggle navigation">
+                    ☰
+                </button>
             </div>
             <div class="user-info">
                 {% if user.is_authenticated %}
@@ -149,6 +153,29 @@
     </div>
     
     <script>
+        // Mobile navigation toggle
+        function toggleMobileNav() {
+            const nav = document.getElementById('header-nav');
+            nav.classList.toggle('mobile-open');
+        }
+
+        // Close mobile nav when clicking outside or on a link
+        document.addEventListener('click', function(e) {
+            const nav = document.getElementById('header-nav');
+            const toggle = document.querySelector('.mobile-nav-toggle');
+            
+            if (!nav.contains(e.target) && !toggle.contains(e.target)) {
+                nav.classList.remove('mobile-open');
+            }
+        });
+
+        // Close mobile nav when clicking on nav links
+        document.querySelectorAll('.nav-link').forEach(link => {
+            link.addEventListener('click', function() {
+                document.getElementById('header-nav').classList.remove('mobile-open');
+            });
+        });
+
         // Privacy modal functions
         function showPrivacyModal() {
             const modal = document.getElementById('privacy-modal');