fix: restore baseline and apply ONLY 3 critical mobile bugs (toggle JS/CSS, tables/pre overflow, padding)

TechStack Global · TechStack Global · commit 1ffcc78494de · 2026-02-28T01:30:28.000+05:00
diff --git a/about.html b/about.html
@@ -30,7 +30,10 @@
     <header class="glass-header">
         <nav class="container">
             <div class="logo"><a href="index.html">TechStack<span class="accent">Global</span></a></div>
-                        <ul class="nav-links">
+                                    <button class="menu-toggle" aria-label="Toggle Menu">
+                <i class="fa-solid fa-bars"></i>
+            </button>
+            <ul class="nav-links" id="nav-links">
                 <li><a href="index.html">Home</a></li>
                 <li><a href="amazon-stack.html">Amazon Stack</a></li>
                 <li><a href="blog.html">Guides</a></li>
diff --git a/affiliate-disclosure.html b/affiliate-disclosure.html
@@ -19,7 +19,10 @@
     <header class="glass-header">
         <nav class="container">
             <div class="logo"><a href="index.html">TechStack<span class="accent">Global</span></a></div>
-                        <ul class="nav-links">
+                                    <button class="menu-toggle" aria-label="Toggle Menu">
+                <i class="fa-solid fa-bars"></i>
+            </button>
+            <ul class="nav-links" id="nav-links">
                 <li><a href="index.html">Home</a></li>
                 <li><a href="amazon-stack.html">Amazon Stack</a></li>
                 <li><a href="blog.html">Guides</a></li>
diff --git a/amazon-stack.html b/amazon-stack.html
@@ -43,7 +43,10 @@
     <header class="glass-header">
         <nav class="container">
             <div class="logo"><a href="index.html">TechStack<span class="accent">Global</span></a></div>
-                        <ul class="nav-links">
+                                    <button class="menu-toggle" aria-label="Toggle Menu">
+                <i class="fa-solid fa-bars"></i>
+            </button>
+            <ul class="nav-links" id="nav-links">
                 <li><a href="index.html">Home</a></li>
                 <li><a href="amazon-stack.html" class="active">Amazon Stack</a></li>
                 <li><a href="blog.html">Guides</a></li>
diff --git a/blog.html b/blog.html
@@ -33,7 +33,10 @@
     <header class="glass-header">
         <nav class="container">
             <div class="logo"><a href="index.html">TechStack<span class="accent">Global</span></a></div>
-                        <ul class="nav-links">
+                                    <button class="menu-toggle" aria-label="Toggle Menu">
+                <i class="fa-solid fa-bars"></i>
+            </button>
+            <ul class="nav-links" id="nav-links">
                 <li><a href="index.html">Home</a></li>
                 <li><a href="amazon-stack.html">Amazon Stack</a></li>
                 <li><a href="blog.html" class="active">Guides</a></li>
diff --git a/contact.html b/contact.html
@@ -31,7 +31,10 @@
     <header class="glass-header">
         <nav class="container">
             <div class="logo"><a href="index.html">TechStack<span class="accent">Global</span></a></div>
-                        <ul class="nav-links">
+                                    <button class="menu-toggle" aria-label="Toggle Menu">
+                <i class="fa-solid fa-bars"></i>
+            </button>
+            <ul class="nav-links" id="nav-links">
                 <li><a href="index.html">Home</a></li>
                 <li><a href="amazon-stack.html">Amazon Stack</a></li>
                 <li><a href="blog.html">Guides</a></li>
diff --git a/image_request_log.txt b/image_request_log.txt
diff --git a/index.html b/index.html
@@ -60,7 +60,10 @@
                     TechStack<span class="accent">Global</span>
                 </a>
             </div>
-                        <ul class="nav-links">
+                                    <button class="menu-toggle" aria-label="Toggle Menu">
+                <i class="fa-solid fa-bars"></i>
+            </button>
+            <ul class="nav-links" id="nav-links">
                 <li><a href="index.html" class="active">Home</a></li>
                 <li><a href="amazon-stack.html">Amazon Stack</a></li>
                 <li><a href="blog.html">Guides</a></li>
diff --git a/posts/apple-macbook-pro-m4-pro-review.html b/posts/apple-macbook-pro-m4-pro-review.html
@@ -75,7 +75,10 @@
     <header class="glass-header">
         <nav class="container">
             <div class="logo"><a href="../index.html">TechStack<span class="accent">Global</span></a></div>
-                        <ul class="nav-links">
+                                    <button class="menu-toggle" aria-label="Toggle Menu">
+                <i class="fa-solid fa-bars"></i>
+            </button>
+            <ul class="nav-links" id="nav-links">
                 <li><a href="../index.html">Home</a></li>
                 <li><a href="../amazon-stack.html">Amazon Stack</a></li>
                 <li><a href="../blog.html">Guides</a></li>
diff --git a/posts/best-premium-laptop-for-work-2026.html b/posts/best-premium-laptop-for-work-2026.html
@@ -60,7 +60,10 @@
     <header class="glass-header">
         <nav class="container">
             <div class="logo"><a href="../index.html">TechStack<span class="accent">Global</span></a></div>
-                        <ul class="nav-links">
+                                    <button class="menu-toggle" aria-label="Toggle Menu">
+                <i class="fa-solid fa-bars"></i>
+            </button>
+            <ul class="nav-links" id="nav-links">
                 <li><a href="../index.html">Home</a></li>
                 <li><a href="../amazon-stack.html">Amazon Stack</a></li>
                 <li><a href="../blog.html">Guides</a></li>
diff --git a/posts/best-remote-work-setup-2026.html b/posts/best-remote-work-setup-2026.html
@@ -41,7 +41,10 @@
     <header class="glass-header">
         <nav class="container">
             <div class="logo"><a href="../index.html">TechStack<span class="accent">Global</span></a></div>
-                        <ul class="nav-links">
+                                    <button class="menu-toggle" aria-label="Toggle Menu">
+                <i class="fa-solid fa-bars"></i>
+            </button>
+            <ul class="nav-links" id="nav-links">
                 <li><a href="../index.html">Home</a></li>
                 <li><a href="../amazon-stack.html">Amazon Stack</a></li>
                 <li><a href="../blog.html">Guides</a></li>
diff --git a/posts/dell-thunderbolt-smart-dock-review.html b/posts/dell-thunderbolt-smart-dock-review.html
@@ -88,7 +88,10 @@
     <header class="glass-header">
         <nav class="container">
             <div class="logo"><a href="../index.html">TechStack<span class="accent">Global</span></a></div>
-                        <ul class="nav-links">
+                                    <button class="menu-toggle" aria-label="Toggle Menu">
+                <i class="fa-solid fa-bars"></i>
+            </button>
+            <ul class="nav-links" id="nav-links">
                 <li><a href="../index.html">Home</a></li>
                 <li><a href="../amazon-stack.html">Amazon Stack</a></li>
                 <li><a href="../blog.html">Guides</a></li>
diff --git a/posts/dell-xps-15-9530-review.html b/posts/dell-xps-15-9530-review.html
@@ -88,7 +88,10 @@
     <header class="glass-header">
         <nav class="container">
             <div class="logo"><a href="../index.html">TechStack<span class="accent">Global</span></a></div>
-                        <ul class="nav-links">
+                                    <button class="menu-toggle" aria-label="Toggle Menu">
+                <i class="fa-solid fa-bars"></i>
+            </button>
+            <ul class="nav-links" id="nav-links">
                 <li><a href="../index.html">Home</a></li>
                 <li><a href="../amazon-stack.html">Amazon Stack</a></li>
                 <li><a href="../blog.html">Guides</a></li>
diff --git a/posts/do-you-need-thunderbolt-dock.html b/posts/do-you-need-thunderbolt-dock.html
@@ -53,7 +53,10 @@
     <header class="glass-header">
         <nav class="container">
             <div class="logo"><a href="../index.html">TechStack<span class="accent">Global</span></a></div>
-                        <ul class="nav-links">
+                                    <button class="menu-toggle" aria-label="Toggle Menu">
+                <i class="fa-solid fa-bars"></i>
+            </button>
+            <ul class="nav-links" id="nav-links">
                 <li><a href="../index.html">Home</a></li>
                 <li><a href="../amazon-stack.html">Amazon Stack</a></li>
                 <li><a href="../blog.html">Guides</a></li>
diff --git a/posts/is-a-4k-monitor-worth-it.html b/posts/is-a-4k-monitor-worth-it.html
@@ -53,7 +53,10 @@
     <header class="glass-header">
         <nav class="container">
             <div class="logo"><a href="../index.html">TechStack<span class="accent">Global</span></a></div>
-                        <ul class="nav-links">
+                                    <button class="menu-toggle" aria-label="Toggle Menu">
+                <i class="fa-solid fa-bars"></i>
+            </button>
+            <ul class="nav-links" id="nav-links">
                 <li><a href="../index.html">Home</a></li>
                 <li><a href="../amazon-stack.html">Amazon Stack</a></li>
                 <li><a href="../blog.html">Guides</a></li>
diff --git a/posts/is-samsung-990-pro-worth-it.html b/posts/is-samsung-990-pro-worth-it.html
@@ -53,7 +53,10 @@
     <header class="glass-header">
         <nav class="container">
             <div class="logo"><a href="../index.html">TechStack<span class="accent">Global</span></a></div>
-                        <ul class="nav-links">
+                                    <button class="menu-toggle" aria-label="Toggle Menu">
+                <i class="fa-solid fa-bars"></i>
+            </button>
+            <ul class="nav-links" id="nav-links">
                 <li><a href="../index.html">Home</a></li>
                 <li><a href="../amazon-stack.html">Amazon Stack</a></li>
                 <li><a href="../blog.html">Guides</a></li>
diff --git a/posts/lg-27us500-w-ultrafine-monitor-review.html b/posts/lg-27us500-w-ultrafine-monitor-review.html
@@ -89,7 +89,10 @@
     <header class="glass-header">
         <nav class="container">
             <div class="logo"><a href="../index.html">TechStack<span class="accent">Global</span></a></div>
-                        <ul class="nav-links">
+                                    <button class="menu-toggle" aria-label="Toggle Menu">
+                <i class="fa-solid fa-bars"></i>
+            </button>
+            <ul class="nav-links" id="nav-links">
                 <li><a href="../index.html">Home</a></li>
                 <li><a href="../amazon-stack.html">Amazon Stack</a></li>
                 <li><a href="../blog.html">Guides</a></li>
diff --git a/posts/samsung-990-pro-ssd-review.html b/posts/samsung-990-pro-ssd-review.html
@@ -95,7 +95,10 @@
     <header class="glass-header">
         <nav class="container">
             <div class="logo"><a href="../index.html">TechStack<span class="accent">Global</span></a></div>
-                        <ul class="nav-links">
+                                    <button class="menu-toggle" aria-label="Toggle Menu">
+                <i class="fa-solid fa-bars"></i>
+            </button>
+            <ul class="nav-links" id="nav-links">
                 <li><a href="../index.html">Home</a></li>
                 <li><a href="../amazon-stack.html">Amazon Stack</a></li>
                 <li><a href="../blog.html">Guides</a></li>
diff --git a/posts/surface-laptop-studio-2-review.html b/posts/surface-laptop-studio-2-review.html
@@ -88,7 +88,10 @@
     <header class="glass-header">
         <nav class="container">
             <div class="logo"><a href="../index.html">TechStack<span class="accent">Global</span></a></div>
-                        <ul class="nav-links">
+                                    <button class="menu-toggle" aria-label="Toggle Menu">
+                <i class="fa-solid fa-bars"></i>
+            </button>
+            <ul class="nav-links" id="nav-links">
                 <li><a href="../index.html">Home</a></li>
                 <li><a href="../amazon-stack.html">Amazon Stack</a></li>
                 <li><a href="../blog.html">Guides</a></li>
diff --git a/posts/template.html b/posts/template.html
@@ -21,7 +21,10 @@
     <header class="glass-header">
         <nav class="container">
             <div class="logo"><a href="../index.html">TechStack<span class="accent">Global</span></a></div>
-                        <ul class="nav-links">
+                                    <button class="menu-toggle" aria-label="Toggle Menu">
+                <i class="fa-solid fa-bars"></i>
+            </button>
+            <ul class="nav-links" id="nav-links">
                 <li><a href="../index.html">Home</a></li>
                 <li><a href="../amazon-stack.html">Amazon Stack</a></li>
                 <li><a href="../blog.html">Guides</a></li>
diff --git a/script.js b/script.js
@@ -12,6 +12,28 @@ document.addEventListener('DOMContentLoaded', () => {
             });
         });
     });
+
+    // Mobile Menu Toggle
+    const menuToggle = document.querySelector('.menu-toggle');
+    const navLinks = document.querySelector('.nav-links');
+
+    if (menuToggle && navLinks) {
+        menuToggle.addEventListener('click', () => {
+            navLinks.classList.toggle('active');
+
+            // Toggle icon between bars and times
+            const icon = menuToggle.querySelector('i');
+            if (icon) {
+                if (navLinks.classList.contains('active')) {
+                    icon.classList.remove('fa-bars');
+                    icon.classList.add('fa-times');
+                } else {
+                    icon.classList.remove('fa-times');
+                    icon.classList.add('fa-bars');
+                }
+            }
+        });
+    }
 });
 
 /**
diff --git a/style.css b/style.css
@@ -182,6 +182,10 @@ img {
     list-style: none;
 }
 
+.menu-toggle {
+    display: none;
+}
+
 .nav-links a {
     font-weight: 500;
     font-size: 0.95rem;
@@ -1002,15 +1006,70 @@ img {
 /* Responsive adjustments */
 @media (max-width: 768px) {
     .glass-header nav {
-        flex-direction: column;
-        gap: 1rem;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.8rem 0;
     }
 
-    .nav-links {
+    .menu-toggle {
         display: flex;
-        flex-wrap: wrap;
+        align-items: center;
         justify-content: center;
-        gap: 1rem;
+        background: transparent;
+        border: none;
+        color: var(--text-primary);
+        font-size: 1.5rem;
+        cursor: pointer;
+        padding: 0.5rem;
+        min-height: 44px;
+        min-width: 44px;
+        position: relative;
+        z-index: 1001;
+    }
+
+    .nav-links {
+        position: fixed;
+        top: 68px;
+        /* Adjusted to sit under header */
+        left: 0;
+        right: 0;
+        bottom: auto;
+        width: 100%;
+        background: rgba(10, 15, 25, 0.98);
+        backdrop-filter: blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+        padding: 1.5rem 0;
+        gap: 0.5rem;
+        transform: translateY(-100%);
+        opacity: 0;
+        transition: transform 0.4s ease, opacity 0.3s ease;
+        z-index: 999;
+        pointer-events: none;
+        border-bottom: 1px solid var(--border-glass);
+        margin: 0;
+    }
+
+    .nav-links.active {
+        transform: translateY(0);
+        opacity: 1;
+        pointer-events: auto;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    }
+
+    .nav-links li {
+        width: 100%;
+        text-align: center;
+    }
+
+    .nav-links a {
+        display: block;
+        padding: 0.5rem 0;
+        font-size: 1.1rem;
+        font-weight: 600;
     }
 
     .hero {
@@ -1049,7 +1108,9 @@ img {
 
 /* --- Mobile Fixes for Article Pages --- */
 @media screen and (max-width: 768px) {
-    .container {
+
+    .container,
+    .article-container {
         padding-left: 1rem;
         padding-right: 1rem;
         width: 100%;
@@ -1091,6 +1152,13 @@ img {
         border-radius: 8px !important;
     }
 
+    .post-body table,
+    .post-body pre {
+        max-width: 100%;
+        overflow-x: auto;
+        display: block;
+    }
+
     /* Fix sticky sidebar obscuring or overflowing */
     .post-grid {
         display: flex;
diff --git a/sync_nav.py b/sync_nav.py
@@ -5,7 +5,10 @@
 nav_pattern = re.compile(r'<ul class="nav-links">.*?</ul>', re.DOTALL)
 
 def update_nav(directory, prefix=""):
-    new_nav = f"""            <ul class="nav-links">
+    new_nav = f"""            <button class="menu-toggle" aria-label="Toggle Menu">
+                <i class="fa-solid fa-bars"></i>
+            </button>
+            <ul class="nav-links" id="nav-links">
                 <li><a href="{prefix}index.html">Home</a></li>
                 <li><a href="{prefix}amazon-stack.html">Amazon Stack</a></li>
                 <li><a href="{prefix}blog.html">Guides</a></li>
diff --git a/take_mobile_screenshots.py b/take_mobile_screenshots.py
