From eef97143e54e68fb33e645ea1f92f2ca80edfe39 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 24 Oct 2025 16:47:54 +0000
Subject: [PATCH] Fix: Adjust mobile navbar styling

---
 src/components/Navbar.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 67b8c74..1c49b84 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -3,7 +3,7 @@ import { Home, MessageSquare, Mail } from "lucide-react";
 
 export const Navbar = () => {
   const getNavClass = ({ isActive }: { isActive: boolean }) =>
-    `flex items-center gap-2 px-4 py-2 rounded-md transition-colors ${
+    `flex items-center gap-1.5 px-2 sm:px-4 py-2 rounded-md transition-colors ${
       isActive
         ? "bg-accent text-accent-foreground font-semibold"
         : "text-foreground hover:bg-accent/50"
@@ -11,24 +11,27 @@ export const Navbar = () => {
 
   return (
     <nav className="sticky top-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border shadow-sm">
-      <div className="max-w-7xl mx-auto px-6 py-4">
-        <div className="flex items-center justify-between">
+      <div className="max-w-7xl mx-auto px-4 py-3">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
           <div className="flex items-center gap-2">
-            <h1 className="text-xl font-bold text-primary">Save Victoria Way Carpark</h1>
+            <h1 className="text-lg sm:text-xl font-bold text-primary">
+              <span className="hidden sm:inline">Save Victoria Way Carpark</span>
+              <span className="sm:hidden">Save VW Carpark</span>
+            </h1>
           </div>
           
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1 sm:gap-2 justify-center">
             <NavLink to="/" end className={getNavClass}>
               <Home size={18} />
-              <span>Home</span>
+              <span className="text-sm sm:text-base">Home</span>
             </NavLink>
             <NavLink to="/testimonies" className={getNavClass}>
               <MessageSquare size={18} />
-              <span>Testimonies</span>
+              <span className="text-sm sm:text-base">Testimonies</span>
             </NavLink>
             <NavLink to="/contact" className={getNavClass}>
               <Mail size={18} />
-              <span>Contact</span>
+              <span className="text-sm sm:text-base">Contact</span>
             </NavLink>
           </div>
         </div>