From 2fe3b21e09343d138b596b14da19176c8c38263f Mon Sep 17 00:00:00 2001
From: Chris Fulljames <christianfulljames@gmail.com>
Date: Tue, 1 Jul 2025 08:24:41 -0400
Subject: [PATCH] Fix sticky navbar

---
 src/littlesongplace/static/styles.css   |  9 ++++----
 src/littlesongplace/templates/base.html | 30 +++++++++++++------------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/littlesongplace/static/styles.css b/src/littlesongplace/static/styles.css
index 8246524..a2271d8 100644
--- a/src/littlesongplace/static/styles.css
+++ b/src/littlesongplace/static/styles.css
@@ -157,6 +157,11 @@ div.main {
     .layout-side { width: auto; }
 }
 
+.sticky {
+    position: sticky;
+    top: 10px;
+}
+
 .site-title {
     text-align: center;
     font-size: 3em;
@@ -272,9 +277,6 @@ input[type=range]::-moz-range-thumb {
 
 /* Navbar */
 .navbar {
-    position: sticky;
-    top: 10px;
-
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
@@ -294,7 +296,6 @@ input[type=range]::-moz-range-thumb {
 
 @media screen and (max-width: 900px) {
     .navbar {
-        position: static;
         flex-direction: row;
         justify-content: center;
         align-items: center;
diff --git a/src/littlesongplace/templates/base.html b/src/littlesongplace/templates/base.html
index a51a19c..64cebab 100644
--- a/src/littlesongplace/templates/base.html
+++ b/src/littlesongplace/templates/base.html
@@ -26,23 +26,25 @@
 
             <!-- Navbar -->
             <div class="layout-side">
-                <div class="navbar">
-                    <a href="/">Home</a>
-                    <a href="/jams/1">Jam</a>
-                    <a href="/about">About</a>
-                    <a href="/site-news">News</a>
-                    <a href="/songs">Random</a>
-                </div>
+                <div class="sticky">
+                    <div class="navbar">
+                        <a href="/">Home</a>
+                        <a href="/jams/1">Jam</a>
+                        <a href="/about">About</a>
+                        <a href="/site-news">News</a>
+                        <a href="/songs">Random</a>
+                    </div>
 
-                <div class="navbar">
-                    <a href="/users/{{ session["username"] }}" class="nav-logged-in" id="my-profile" hidden>My Profile</a>
-                    <a href="/activity" class="nav-logged-in" hidden><span id="activity-indicator" hidden></span>Activity</a>
-                    <a href="/logout" class="nav-logged-in" hidden>Sign Out</a>
+                    <div class="navbar">
+                        <a href="/users/{{ session["username"] }}" class="nav-logged-in" id="my-profile" hidden>My Profile</a>
+                        <a href="/activity" class="nav-logged-in" hidden><span id="activity-indicator" hidden></span>Activity</a>
+                        <a href="/logout" class="nav-logged-in" hidden>Sign Out</a>
 
-                    <a href="/signup" class="nav-logged-out">Create Account</a>
-                    <a href="/login" class="nav-logged-out">Sign In</a>
+                        <a href="/signup" class="nav-logged-out">Create Account</a>
+                        <a href="/login" class="nav-logged-out">Sign In</a>
 
-                    <span class="nav-logged-in" id="logged-in-status" hidden></span>
+                        <span class="nav-logged-in" id="logged-in-status" hidden></span>
+                    </div>
                 </div>
             </div>
 
-- 
2.39.5