diff --git a/home/templates/base_main.html b/home/templates/base_main.html
index b6fe084c..b671bdcf 100644
--- a/home/templates/base_main.html
+++ b/home/templates/base_main.html
@@ -182,8 +182,7 @@
 
             {% comment %} TODO rewrite star generation so this isn't necessary {% endcomment %}
             {% if request.session.color_scheme == "dark" %}
-                <!-- make sure we're above bootstrap's navbar -->
-                <canvas id="navbar-canvas" style="z-index: 1100"></canvas>
+                <canvas id="navbar-canvas"></canvas>
             {% endif %}
         </div>
 
diff --git a/planetterp/static/css/darktheme.css b/planetterp/static/css/darktheme.css
index f4e0fac1..1b71eded 100644
--- a/planetterp/static/css/darktheme.css
+++ b/planetterp/static/css/darktheme.css
@@ -16,7 +16,7 @@ i.fas.fa-star.professor-rating:after,
 
 .navbar {
 	/* necessary to override bootstrap's .bg-primary */
-	background-color: black !important;
+	background-color: transparent !important;
 }
 
 #page-footer {
@@ -142,3 +142,19 @@ hr {
 .bootstrap-datetimepicker-widget table td span:hover {
 	background-color: lightblue;
 }
+
+/* bootstrap's lg breakpoint */
+@media(max-width: 992px) {
+	#site-navbar {
+		background-color: black;
+		/* since we made the navbar transparent, the sides of the site-navbar dropdown
+		which would normally take on the navbar color now take on the background color (grey).
+		We'll manually adjust the location of the navbar to align and cover up this space to get
+		the desired pure black tone. */
+		margin-left: -1rem;
+		padding-left: 1rem;
+		margin-right: -1rem;
+		padding-bottom: 0.5rem;
+		margin-top: 0.5rem;
+	}
+}