docs: fix layout without JS enabled

The Bootstrap stylesheet for the website sets the header to position: fixed, taking it out of the layout flow. Some javascript later updates the style attribute, so that the content is pushed down by an appropriate amount. If JS is disabled that correction doesn't happen, and so the header overlaps the content. Make the header static by default, and only apply position: fixed if JavaScript is enabled. Fixes #599 Signed-off-by: Peter Schultz <[email protected]>
fabiolb · Mar 1, 2019 · 35103f8 · 35103f8
1 parent dd9ef7d
commit 35103f8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/docs/static/css/custom.css b/docs/static/css/custom.css
@@ -3,6 +3,12 @@
 	height: 100%;
 }
 
+/* set navbar to static for now. If JS is enabled, we will revert to fixed in
+ * custom.js, but if JS isn't enabled a fixed header overlaps the content. */
+.site-header.sticky .navbar {
+    position: static;
+}
+
 article.main-content {
 	padding-top: 0;
 }

diff --git a/docs/static/js/custom.js b/docs/static/js/custom.js
@@ -1,2 +1,4 @@
 $(function() {
+  // Make the navbar only fixed if JS is enabled, else it overlaps the content.
+  $(".site-header.sticky .navbar").css('position', 'fixed');
 });