移动端的话将导航栏放在标题栏下方，然后是一个x轴可以滚动的导航栏 - Follow Up Deployment

index.html

@@ -108,7 +108,7 @@
                     <span class="bg-pink-600 rounded-full px-3 py-1 text-sm ml-2 animate-pulse">♥ 萌新打卡中 ♥</span>
                 </div>
                 
-                <div class="hidden md:flex items-center space-x-6">
+                <div class="md:flex items-center space-x-6 hidden">
                     <a href="#home" class="hover:text-pink-200 transition flex items-center">
                         <i class="fas fa-home mr-1"></i> 首页
                     </a>
@@ -127,9 +127,6 @@
                 </div>
                 
                 <div class="flex items-center space-x-4">
-                    <button class="md:hidden text-white focus:outline-none">
-                        <i class="fas fa-bars text-2xl"></i>
-                    </button>
                     <div class="relative">
                         <button class="flex items-center focus:outline-none">
                             <img src="https://i.pravatar.cc/40?img=5" alt="User" class="w-8 h-8 rounded-full border-2 border-pink-300">
@@ -141,37 +138,27 @@
         </div>
     </nav>
 
-    <!-- Mobile Menu -->
-    <div class="bg-pink-100 md:hidden hidden" id="mobileMenu">
-        <div class="flex flex-col py-2 px-4 space-y-2">
-            <a href="#home" class="text-pink-700 py-2 px-3 rounded hover:bg-pink-200 transition flex items-center">
-                <i class="fas fa-home mr-2"></i> 首页
+    <!-- Mobile Navigation -->
+    <div class="md:hidden bg-pink-500 text-white py-3 px-4 overflow-x-auto whitespace-nowrap">
+        <div class="inline-flex space-x-6">
+            <a href="#home" class="hover:text-pink-200 transition flex items-center">
+                <i class="fas fa-home mr-1"></i> 首页
             </a>
-            <a href="#announcement" class="text-pink-700 py-2 px-3 rounded hover:bg-pink-200 transition flex items-center">
-                <i class="fas fa-bullhorn mr-2"></i> 小喇叭
+            <a href="#announcement" class="hover:text-pink-200 transition flex items-center">
+                <i class="fas fa-bullhorn mr-1"></i> 小喇叭
             </a>
-            <a href="#chat" class="text-pink-700 py-2 px-3 rounded hover:bg-pink-200 transition flex items-center">
-                <i class="fas fa-comment-dots mr-2"></i> 闲聊区
+            <a href="#chat" class="hover:text-pink-200 transition flex items-center">
+                <i class="fas fa-comment-dots mr-1"></i> 闲聊区
             </a>
-            <a href="#analysis" class="text-pink-700 py-2 px-3 rounded hover:bg-pink-200 transition flex items-center">
-                <i class="fas fa-search mr-2"></i> 日常分析
+            <a href="#analysis" class="hover:text-pink-200 transition flex items-center">
+                <i class="fas fa-search mr-1"></i> 日常分析
             </a>
-            <a href="#create" class="bg-pink-500 text-white py-2 px-3 rounded-full hover:bg-pink-600 transition flex items-center justify-center">
-                <i class="fas fa-plus mr-2"></i> 发帖
+            <a href="#create" class="bg-pink-600 hover:bg-pink-700 px-3 py-1 rounded-full transition flex items-center">
+                <i class="fas fa-plus mr-1"></i> 发帖
             </a>
         </div>
     </div>
 
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const menuButton = document.querySelector('nav button');
-            const mobileMenu = document.getElementById('mobileMenu');
-            
-            menuButton.addEventListener('click', function() {
-                mobileMenu.classList.toggle('hidden');
-            });
-        });
-    </script>
 
     <!-- Main Content -->
     <div class="container mx-auto px-4 py-8">