diff --git a/layouts/404.html b/layouts/404.html
index 62c4c33b96..c5fefc2885 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -63,7 +63,6 @@
   </head>
   <body class="mobile-support html notfound" data-url="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}">
     <div id="body" class="default-animation">
-      <div id="sidebar-overlay"></div>
       <main id="body-inner" class="chapter" tabindex="-1">
         <div class="flex-block-wrapper">
           <article>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 3ba1245719..c715968a00 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -67,8 +67,6 @@
   </head>
   <body class="mobile-support {{ $outputFormat }}{{- if .Site.Params.disableInlineCopyToClipBoard }} disableInlineCopyToClipboard{{ end }}{{- if .Site.Params.disableHoverBlockCopyToClipBoard }} disableHoverBlockCopyToClipBoard{{ end }}" data-url="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}">
     <div id="body" class="default-animation">
-      <div id="sidebar-overlay"></div>
-      <div id="toc-overlay"></div>
       <nav id="topbar">
         <div>
           <div class="topbar-sidebar-divider"></div>
@@ -80,6 +78,7 @@
               "icon" "bars"
               "title" (printf "%s (CTRL+ALT+n)" (T "Navigation-toggle"))
             )}}
+            <div id="sidebar-overlay"></div>
             {{- $defaultDisableToc := .Site.Params.disableToc | default false }}
             {{- $currentDisableToc := .Params.disableToc | default $defaultDisableToc }}
             {{- $toc_content := partial "toc.html" . }}
@@ -94,6 +93,7 @@
                 "title" (printf "%s (CTRL+ALT+t)" (T "Toc-toggle"))
               )}}
 {{ $toc_content }}
+            <div id="toc-overlay"></div>
             {{- end }}
           </div>
           {{- $showBreadcrumb := (and (not .Params.disableBreadcrumb) (not .Site.Params.disableBreadcrumb)) }}
diff --git a/static/css/theme.css b/static/css/theme.css
index f709c19e04..21f6660adc 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1139,6 +1139,7 @@ html[dir="rtl"] .topbar-next i {
         background-color: rgba( 134, 134, 134, .5 );
         bottom: 0;
         cursor: pointer;
+        height: 100vh;
         left: 0;
         position: absolute;
         right: 0;
@@ -1362,10 +1363,11 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
 .toc-flyout #toc-overlay{
     bottom: 0;
     cursor: pointer;
+    height: calc(100vh - 3rem);
     left: 0;
     position: absolute;
     right: 0;
-    top: 0;
+    top: 3rem;
     z-index: 160;
 }
 
diff --git a/static/js/theme.js b/static/js/theme.js
index 5aae4a9c97..2fd1bf274d 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -940,11 +940,15 @@ function initToc(){
     document.addEventListener( 'keydown', searchShortcutHandler );
     document.addEventListener( 'keydown', tocShortcutHandler );
 
-    document.querySelector( '#sidebar-overlay' ).addEventListener( 'click', showNav );
-    document.querySelector( '#toc-overlay' ).addEventListener( 'click', showToc );
+    var s = document.querySelector( '#sidebar-overlay' );
+    if( s ){
+        s.addEventListener( 'click', showNav );
+    }
+    var o = document.querySelector( '#toc-overlay' );
     var p = document.querySelector( '.progress' );
-    if( p ){
+    if( o && p ){
         // we may not have a toc
+        o.addEventListener( 'click', showToc );
         p.addEventListener( 'click', showToc );
     }
 
@@ -990,13 +994,14 @@ function initSwipeHandler(){
         return false;
     };
 
-    document.querySelector( '#sidebar-overlay' ).addEventListener("touchstart", handleStartX, false);
+    var s = document.querySelector( '#sidebar-overlay' );
+    s && s.addEventListener("touchstart", handleStartX, false);
     document.querySelector( '#sidebar' ).addEventListener("touchstart", handleStartX, false);
     document.querySelectorAll( '#sidebar *' ).forEach( function(e){ e.addEventListener("touchstart", handleStartX); }, false);
-    document.querySelector( '#sidebar-overlay' ).addEventListener("touchmove", handleMoveX, false);
+    s && s.addEventListener("touchmove", handleMoveX, false);
     document.querySelector( '#sidebar' ).addEventListener("touchmove", handleMoveX, false);
     document.querySelectorAll( '#sidebar *' ).forEach( function(e){ e.addEventListener("touchmove", handleMoveX); }, false);
-    document.querySelector( '#sidebar-overlay' ).addEventListener("touchend", handleEndX, false);
+    s && s.addEventListener("touchend", handleEndX, false);
     document.querySelector( '#sidebar' ).addEventListener("touchend", handleEndX, false);
     document.querySelectorAll( '#sidebar *' ).forEach( function(e){ e.addEventListener("touchend", handleEndX); }, false);
 }
