diff --git a/media/css/main.css b/media/css/main.css
index 2a255027..86cbb4f1 100644
--- 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: 575px) {
-    /** HOMEPAGE JUMBOTRON */
-    .pg-jumbotron-header {
-        font-size: 1.5rem;
+
+@media (max-width: 1280px) {
+    input#q {
+      display: none;
     }
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 992px) {
+    .navbar.compressed {
+      padding: 0 10px;
+    }
+
+    .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
index 00000000..b994d54e
--- /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 600bef18..c78d000b 100644
--- 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']);