Improve usability of header on mobile devices

website/thaliawebsite/static/css/base.scss

 #accentbar {
+    position: -webkit-sticky;
+    position: sticky;
     background: $preset;
     height: 5px;
+    top: 0;
     z-index: 1020;
 }
 
 .navbar {
+    position: -webkit-sticky;
+    position: sticky;
     font-size: 16px;
     background-color: $white;
     border-bottom: 1px solid $grey;
     top: 5px;
+    z-index: 1020;
+
 
     > .container {
         justify-content: end;
@@ -95,7 +102,7 @@
     }
 }
 
-@media(max-width: 1200px) {
+@media(max-width: 1199px) {
     .navbar {
         .navbar-brand {
             img {
@@ -105,6 +112,23 @@
     }
 }
 
+@media(max-width: 767px) {
+    #accentbar, .navbar {
+        position: relative;
+        top: 0;
+    }
+}
+
+@media(max-width: 359px) {
+    .navbar {
+        .navbar-brand {
+            img {
+                max-height: 3rem;
+            }
+        }
+    }
+}
+
 #page-header {
     height: 200px;
 

website/thaliawebsite/templates/base.html

@@ -64,9 +64,9 @@
     {% include "announcements/announcement.html" with announcements=announcements %}
 </section>
 
-<div id="accentbar" class="sticky-top"></div>
+<div id="accentbar"></div>
 
-<nav class="navbar navbar-expand-lg sticky-top">
+<nav class="navbar navbar-expand-lg">
     <div class="container">
         <a class="navbar-brand" href="{% url 'index' %}">
             <img