diff --git a/templates/widgets/asidenav.hamlet b/templates/widgets/asidenav.hamlet
index 02bc66510..78809b413 100644
--- a/templates/widgets/asidenav.hamlet
+++ b/templates/widgets/asidenav.hamlet
@@ -3,6 +3,7 @@ $newline never
   <div .asidenav>
     <div .asidenav__box>
       <h3 .asidenav__box-title>
+        $# TODO: this has to come from favourites somehow. Show favourites from older terms?
         WiSe 17/18
       <ul .asidenav__list>
         $forall (Course{..}, courseRoute, pageActions) <- favourites
diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius
index c50fe069f..82b9bd356 100644
--- a/templates/widgets/asidenav.lucius
+++ b/templates/widgets/asidenav.lucius
@@ -6,16 +6,26 @@
   flex: 0 0 300px;
   min-height: calc(100% - 80px);
   transition: all .2s ease-out;
-  width: 300px;
+  width: 24%;
 
   ~ .main__content {
-    padding-left: 300px;
+    padding-left: 24%;
     transition: padding-left .2s ease-out;
   }
 }
 
+/* maximum width of 300px for wide screens */
+@media (min-width: 1200px) {
+  .main__aside {
+    width: 300px;
+
+    ~ .main__content {
+      padding-left: 300px;
+    }
+  }
+}
+
 .asidenav {
-  width: 300px;
   color: white;
 }
 
@@ -33,7 +43,6 @@
 .asidenav__list-item {
   position: relative;
   color: var(--color-lightwhite);
-  padding-left: 10px;
 
   &:hover {
     color: var(--color-link);
@@ -61,6 +70,14 @@
   }
 }
 
+/* small list-item-padding for medium to large screens */
+@media (min-width: 1024px) {
+
+  .asidenav__list-item {
+    padding-left: 10px;
+  }
+}
+
 .asidenav__list-item--active {
   background-color: var(--color-lightwhite);
 
@@ -79,7 +96,7 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding: 7px 0;
+  padding: 7px 10px;
   justify-content: flex-start;
   color: var(--color-lightwhite);
   z-index: 1;
@@ -100,7 +117,6 @@
 
 .asidenav__link-label {
   line-height: 1;
-  padding-left: 13px;
 }
 
 /* hover sub-menus */
@@ -153,11 +169,6 @@
       padding-left: 50px;
     }
 
-    &.pseudo-hover {
-      overflow: visible;
-      flex-basis: 300px;
-    }
-
     .asidenav__box-title {
       width: 50px;
       padding: 1px;
@@ -193,22 +204,14 @@
       }
     }
 
-    .asidenav__list-item:hover {
-
-      > .asidenav__link-wrapper {
-        color: var(--color-dark);
-        background-color: var(--color-lightwhite);
-      }
-    }
-
     .asidenav__link-wrapper {
       color: var(--color-lightwhite);
       padding: 0;
-      // background-color: var(--color-dark);
     }
 
+    .asidenav__nested-list,
     .asidenav__link-label {
-      padding-left: 0;
+      display: none;
     }
 
     .asidenav__list-item--active {
@@ -218,5 +221,6 @@
         color: var(--color-dark);
       }
     }
+
   }
 }
diff --git a/templates/widgets/navbar.hamlet b/templates/widgets/navbar.hamlet
index d8b105341..d89c46837 100644
--- a/templates/widgets/navbar.hamlet
+++ b/templates/widgets/navbar.hamlet
@@ -9,11 +9,10 @@ $newline never
         $forall menuType <- menuTypes
           $case menuType
             $of NavbarAside (MenuItem label mIcon route _)
-              <li .navbar-left__list-item :highlight route:.asidenav__list-item--active>
-                <!-- TODO: rename classes to match navbar -->
-                <a .asidenav__link-wrapper href=@{route}>
-                  <div .glyphicon.glyphicon--#{fromMaybe "none" mIcon}>
-                  <div .asidenav__link-label>#{label}
+              <li .navbar-left__list-item :highlight route:.navbar-left__list-item--active>
+                <a .navbar-left__link-wrapper href=@{route}>
+                  <i .fas.fa-#{fromMaybe "none" mIcon}.fa-2x>
+                  <div .navbar-left__link-label>#{label}
             $of _
 
     <ul .navbar-right__list.list--inline>
diff --git a/templates/widgets/navbar.julius b/templates/widgets/navbar.julius
index d0e06d57d..ae5f18fad 100644
--- a/templates/widgets/navbar.julius
+++ b/templates/widgets/navbar.julius
@@ -11,29 +11,23 @@
       window.setTimeout(function () {
         nav.classList.add('navbar--animated');
       }, 200);
-      checkScroll();
-      addListener();
-    }
-
-    // checks scroll direction and shows/hides navbar accordingly
-    function checkScroll() {
-      var sticky = window.scrollY > 0;
-      sticky = sticky && window.innerHeight < (document.scrollingElement.scrollHeight - 100);
-      nav.classList.toggle('navbar--sticky', sticky);
-      ticking = false;
-    }
-
-    function addListener() {
       window.addEventListener('scroll', function (e) {
         if (!ticking) {
-          window.requestAnimationFrame(checkScroll);
+          window.requestAnimationFrame(update);
           ticking = true;
         }
       }, false);
+      update();
+    }
+
+    function update() {
+      var sticky = window.scrollY > 0;
+      sticky = sticky && window.innerHeight < (document.scrollingElement.scrollHeight - 200);
+      nav.classList.toggle('navbar--sticky', sticky);
+      ticking = false;
     }
   }
 
-
 })();
 
 document.addEventListener('DOMContentLoaded', function () {