Pin the navigation bar to the top of the page.

From user feedback, the scrolling navigation bar would cause problems with
readability, especially in larger font views. This keeps the navigation bar
pinned to the top, until we can find a way to more easily handle this.

diff --git a/media/css/main.css b/media/css/main.css
index fa506028fc6349020e9aa5e59961125e0f809388..6c93c8b7ecca1613b0ec9ad736fd653bc5742866 100644 (file)
--- a/media/css/main.css
+++ b/media/css/main.css
@@ -469,6 +469,7 @@ ul.bold {
     background-color: #336791;
     font-weight: 600;
     padding-bottom: 0.2rem;
+    padding-top: 0.2rem;
 }
 
 .pg-shout-box a {
@@ -1306,16 +1307,6 @@ table.sponsor-table tbody tr td:nth-child(3) {
     }
 }
 
-@media (min-width: 992px) {
-    .navbar.compressed {
-      padding: 0 10px;
-    }
-
-    .pg-shout-box {
-      padding-top: 3.7rem;
-    }
-}
-
 @media (max-width: 992px) {
     .archive {
         margin-top: 2rem;
@@ -1330,11 +1321,6 @@ table.sponsor-table tbody tr td:nth-child(3) {
       height: 1.5rem;
     }
 
-    .pg-shout-box {
-      padding-top: 2.8rem;
-      margin-bottom: 1rem;
-    }
-
     #docContent table.table {
         font-size: 70%;
     }

diff --git a/media/js/main.js b/media/js/main.js
index 30b7bf79e37a9ab78676b360a6ec99a07a81d839..0b37fee8734c24fe136759fc7ee09e98fa7b0ba9 100644 (file)
--- a/media/js/main.js
+++ b/media/js/main.js
@@ -1,9 +1,3 @@
-$(document).ready(function() {
-  $(window).on("scroll", function() {
-    $(".navbar").toggleClass("compressed", $(window).scrollTop() >= 20);
-  });
-});
-
 /*
  * Initialize google analytics
  */

diff --git a/templates/base/base.html b/templates/base/base.html
index a1d3f72a916c3f66e573ab4616fc209c62359301..00a81300bc5167a802482ad530e21882b096bb52 100644 (file)
--- a/templates/base/base.html
+++ b/templates/base/base.html
@@ -26,7 +26,7 @@
       <div class="row justify-content-md-center">
         <div class="col">
           <!-- Header -->
-          <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
+          <nav class="navbar navbar-expand-lg navbar-light bg-light">
             <a class="navbar-brand p-0" href="/">
               <img class="logo" src="/media/img/about/press/elephant.png" alt="PostgreSQL Elephant Logo">
             </a>