diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 212fd7d7b1..6e7e0108b4 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -28,7 +28,7 @@
     {{- partial "menu.html" . }}
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
-      <div id="top-bar" class="highlightable">
+      <div id="topbar" class="highlightable">
         <div>
         {{- $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }}
         {{- if $showPrevNext }}
diff --git a/static/css/print.css b/static/css/print.css
index b325e6664e..4f1d0705cc 100644
--- a/static/css/print.css
+++ b/static/css/print.css
@@ -25,7 +25,7 @@ code.copy-to-clipboard-code {
 pre {
     border: 1px solid #ccc;
 }
-#body #top-bar{
+#body #topbar{
     background-color: #fff; /* avoid background bleeding*/
     border-bottom: 1px solid #ddd;
     border-radius: 0;
@@ -97,7 +97,7 @@ hr{
 #breadcrumbs .links {
     display: inline;
 }
-#top-bar{
+#topbar{
     /* the header is sticky which is not suitable for print; */
     position: inherit; /* IE11 doesn't know "initial" here */
 }
diff --git a/static/css/theme.css b/static/css/theme.css
index b68e4838fe..c011fcf5b5 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -919,7 +919,7 @@ td {
     margin: 0 !important;
 }
 
-#top-bar {
+#topbar {
     background-color: #ffffff; /* var(--MAIN-BG-color) */
     border-radius: 2px;
     height: 0;
@@ -929,7 +929,7 @@ td {
     z-index: 999;
 }
 
-#top-bar > div {
+#topbar > div {
     background-color: rgba( 134, 134, 134, .066 );
     height: 100%;
 }
diff --git a/static/js/theme.js b/static/js/theme.js
index 20689370a0..e6d7b0e71f 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -54,10 +54,10 @@ function initStickyHeader(){
         // add marker when not in top position; allows users
         // to change styles (eg. add a dropshadow)
         if ($(this).scrollTop() == 0) {
-            $('#top-bar').removeClass("is-sticky");
+            $('#topbar').removeClass("is-sticky");
         }
         else {
-            $('#top-bar').addClass("is-sticky");
+            $('#topbar').addClass("is-sticky");
         }
     };
     markSticky();
@@ -504,7 +504,7 @@ jQuery(function() {
     $(".highlightable").highlight(sessionStorage.getItem('search-value'), { element: 'mark' });
     $("mark").parents(".expand").addClass("expand-marked");
 
-    $('#top-bar a:not(:has(img)):not(.btn)').addClass('highlight');
+    $('#topbar a:not(:has(img)):not(.btn)').addClass('highlight');
     $('#body-inner a:not(:has(img)):not(.btn):not(a[rel="footnote"])').addClass('highlight');
 
     sessionStorage.setItem(jQuery('body').data('url'), 1);