Fix sticky navbar

diff --git a/src/littlesongplace/static/styles.css b/src/littlesongplace/static/styles.css
index 8246524250157e29831875325df1f9121144d4d4..a2271d830659f4701953f2280d7ee68df8db9b43 100644 (file)
--- 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 a51a19cf21cc533e386e96d89b234d87e113b3a7..64cebabfa7b47d0f3b068c7aa3b509bf36746c50 100644 (file)
--- 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>