diff --git a/client/src/components/header.tsx b/client/src/components/header.tsx
index 208171c..f0093a4 100644
--- a/client/src/components/header.tsx
+++ b/client/src/components/header.tsx
@@ -1,5 +1,5 @@
 import { Link, useLocation } from "wouter";
-import { Search, X } from "lucide-react";
+import { Menu, X, Search } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useState, useRef, useEffect } from "react";
 import folxLogo from "@assets/folx_MT_poz_b_1772296729169.png";
@@ -17,6 +17,7 @@ const navItems = [
 ];
 
 export default function Header() {
+  const [mobileOpen, setMobileOpen] = useState(false);
   const [searchOpen, setSearchOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
   const [location, navigate] = useLocation();
@@ -98,39 +99,50 @@ export default function Header() {
                 <Search className="w-4 h-4" />
               </Button>
             )}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="md:hidden"
+              onClick={() => setMobileOpen(!mobileOpen)}
+              data-testid="button-mobile-menu"
+            >
+              {mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+            </Button>
           </div>
         </div>
       </div>
 
-      {/* Mobilna navigacija: vodoravna vrstica rubrik, vedno vidna (kot na ONE),
-          namesto hamburger menija. Vodoravno drsenje brez vidnega drsnika. */}
-      <nav
-        className="md:hidden border-t border-card-border bg-card overflow-x-auto"
-        style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
-        data-testid="nav-mobile-bar"
-      >
-        <div className="flex items-stretch gap-1 px-3 py-1.5 w-max">
-          {navItems.map((item) => {
-            const active = location === item.href;
-            return (
+      {mobileOpen && (
+        <div className="md:hidden border-t border-card-border bg-card" data-testid="nav-mobile">
+          <nav className="flex flex-col p-4 gap-1">
+            <form onSubmit={handleSearch} className="mb-2" data-testid="form-mobile-search">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                <input
+                  type="text"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  placeholder="Artikel, Videos suchen..."
+                  className="w-full pl-9 pr-3 py-2 bg-background border border-card-border rounded-md text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+                  data-testid="input-mobile-search"
+                />
+              </div>
+            </form>
+            {navItems.map((item) => (
               <Link key={item.href} href={item.href}>
-                <span
-                  className={
-                    "block whitespace-nowrap px-3 py-1.5 rounded-md text-[13px] font-semibold uppercase tracking-wide transition-colors " +
-                    (active
-                      ? "bg-primary text-primary-foreground"
-                      : "text-foreground/80 hover:text-primary")
-                  }
+                <Button
+                  variant={location === item.href ? "default" : "ghost"}
+                  className="w-full justify-start"
+                  onClick={() => setMobileOpen(false)}
                   data-testid={`link-mobile-${item.label.toLowerCase().replace(/\s/g, "-")}`}
                 >
                   {item.label}
-                </span>
+                </Button>
               </Link>
-            );
-          })}
+            ))}
+          </nav>
         </div>
-      </nav>
-
+      )}
     </header>
   );
 }