Refactor the navigation bar for desktop, tablet, and mobile.

Specifically, the navigation bar now shrinks in height on scroll
and when on devices smaller than 768px. Additionally, the search
box disappears at the 1280px break point to avoid text wrapping.
A JavaScript file was added (main.js) to apply the "compressed"
class when scrolling, which is what provides the menu shrinking.

diff --git a/media/css/main.css b/media/css/main.css
index 2a255027b62fe211d2fe4510b5d53dafe1bee1bb..86cbb4f174ce1eba281da85babdc30ebee88c52d 100644 (file)
--- a/media/css/main.css
+++ b/media/css/main.css
@@ -24,7 +24,6 @@ body {
     font-weight: 400;
     color: #515151;
     font-size: 11.5pt;
-    padding-top: 54px; /** this is to account for the fixed navbar blocking content */
 }
 
 p {
@@ -571,6 +570,7 @@ ul.actions {
 
 .navbar {
   box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
+  transition: all 0.3s;
 }
 
 /* #SIDEBAR UL STYLING */
@@ -782,33 +782,40 @@ h1.subject {
 
 /** ALL RESPONSIVE QUERIES HERE */
 /* Small devices (landscape phones, 576px and up)*/
-@media (min-width: 576px) {
-    /** NAVBAR */
-    .nav-item > a {
-        font-size: 0.95rem;
-        font-weight: 600;
+
+@media (max-width: 1280px) {
+    input#q {
+      display: none;
     }
 }
-@media (max-width: 575px) {
-    /** HOMEPAGE JUMBOTRON */
-    .pg-jumbotron-header {
-        font-size: 1.5rem;
+
+@media (min-width: 992px) {
+    .navbar.compressed {
+      padding: 0 10px;
     }
-}
 
-@media (max-width: 1200px) {
+    .pg-shout-box {
+      padding-top: 3.7rem;
+    }
 }
 
 @media (max-width: 992px) {
+    .navbar {
+      padding: 5px 10px;
+    }
+
+    .navbar-toggler-icon {
+      width: 1rem;
+      height: 1.5rem;
+    }
 
+    .pg-shout-box {
+      padding-top: 2.8rem;
+    }
 }
 
 @media (max-width: 768px) {
 
-  body {
-    padding-top: 55px;
-  }
-
   .jumbotron.jumbotron-fluid.pg-jumbotron {
     padding: 4em;
   }
@@ -864,3 +871,17 @@ h1.subject {
   }
 
 }
+
+@media (min-width: 576px) {
+    /** NAVBAR */
+    .nav-item > a {
+        font-size: 0.95rem;
+        font-weight: 600;
+    }
+}
+@media (max-width: 575px) {
+    /** HOMEPAGE JUMBOTRON */
+    .pg-jumbotron-header {
+        font-size: 1.5rem;
+    }
+}

diff --git a/media/js/main.js b/media/js/main.js
new file mode 100644 (file)
index 0000000..b994d54
--- /dev/null
+++ b/media/js/main.js
@@ -0,0 +1,5 @@
+$(document).ready(function() {
+  $(window).on("scroll", function() {
+    $(".navbar").toggleClass("compressed", $(window).scrollTop() >= 20);
+  });
+});

diff --git a/templates/base/base.html b/templates/base/base.html
index 600bef18f90610a95b29d07b52e3f3413751d99c..c78d000b0622fc5e9cd465c4c8f90cce9474053c 100644 (file)
--- a/templates/base/base.html
+++ b/templates/base/base.html
@@ -87,6 +87,7 @@
     <script src="/media/js/jquery-3.2.1.slim.min.js?{{gitrev}}"></script>
     <script src="/media/js/popper.min.js?{{gitrev}}"></script>
     <script src="/media/js/bootstrap.min.js?{{gitrev}}"></script>
+    <script src="/media/js/main.js?{{gitrev}}"></script>
     <script type="text/javascript">
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-1345454-1']);