diff --git a/static/src/scss/_bulma_overrides.scss b/static/src/scss/_bulma_overrides.scss
index f911cc1..5604121 100644
--- a/static/src/scss/_bulma_overrides.scss
+++ b/static/src/scss/_bulma_overrides.scss
@@ -9,6 +9,12 @@ $primary: #e85537;
 $link: $primary;
 $dark: #17181c;
 
+$navbar-item-color: $grey-light;
+$navbar-background-color: $dark;
+$navbar-item-hover-color: $grey-lighter;
+$navbar-item-hover-background-color: $navbar-background-color;
+$navbar-colors: (); // Disable other variants to keep the size down
+
 $code-background: none;
 $pre-background: none;
 $code-padding: 0px;
diff --git a/static/src/scss/_navbar.scss b/static/src/scss/_navbar.scss
index 77a6c7b..e9c8052 100644
--- a/static/src/scss/_navbar.scss
+++ b/static/src/scss/_navbar.scss
@@ -1,8 +1,8 @@
-.navbar-item {
-  font-family: $family-code;
+.navbar-item.home-link,
+.navbar-item.navbar-icon {
+  color: $grey-lighter;
 
   &:hover {
-    background-color: black !important;
-    color: $grey-light !important;
+    color: $white;
   }
 }
diff --git a/website/common/templates/common/navbar.html b/website/common/templates/common/navbar.html
index e4be452..33b311e 100644
--- a/website/common/templates/common/navbar.html
+++ b/website/common/templates/common/navbar.html
@@ -1,8 +1,8 @@
 {% load wagtailcore_tags %}
 
-<nav class="navbar has-background-black has-text-white" role="navigation" aria-label="main navigation">
+<nav class="navbar is-family-code" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
-    <a class="navbar-item has-text-white" href="{% pageurl homepage %}">
+    <a class="navbar-item home-link" href="{% pageurl homepage %}">
       /home/theorangeone
     </a>
 
@@ -13,22 +13,22 @@
     </a>
   </div>
 
-  <div id="navbar" class="navbar-menu has-background-black">
+  <div id="navbar" class="navbar-menu">
     <div class="navbar-start">
       {% for nav_page in nav_pages %}
-        <a class="navbar-item has-text-grey" href="{% pageurl nav_page %}">
+        <a class="navbar-item" href="{% pageurl nav_page %}">
           ~/{{ nav_page.slug }}
         </a>
       {% endfor %}
     </div>
 
     <div class="navbar-end is-hidden-touch mr-2">
-      <a class="navbar-item has-text-white">
+      <a class="navbar-item navbar-icon">
         <span class="icon">
           <i class="fab fa-github" aria-hidden="true"></i>
         </span>
       </a>
-      <a class="navbar-item has-text-white" id="search-button">
+      <a class="navbar-item navbar-icon" id="search-button">
         <span class="icon">
           <i class="fas fa-search" aria-hidden="true"></i>
         </span>