Remove sticky-top class from side navigations (#827)

The sticky-top class increases the z-index of the side navigations to 1030. The high z-index is not necessary for the side navigations, and has caused it to be layered on top of the dropdowns of other components. Let's remove the sticky-top class from the side navigations, and use other css classes to achieve the same positioning without the high z-index.
MarkBind · Apr 11, 2019 · f3144f0 · f3144f0
1 parent 66edd26
commit f3144f0
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 7 deletions.
diff --git a/asset/css/markbind.css b/asset/css/markbind.css
@@ -131,6 +131,10 @@ footer {
     max-height: 90vh;
 }
 
+.position-top {
+    top: 0;
+}
+
 /* Bootstrap small(sm) responsive breakpoint */
 @media (max-width: 767.98px) {
     .dropdown-menu > li > a {

diff --git a/src/Page.js b/src/Page.js
@@ -594,7 +594,7 @@ Page.prototype.insertSiteNav = function (pageData) {
   }
   // Wrap sections
   const wrappedSiteNav = `<nav id="${SITE_NAV_ID}" class="navbar navbar-light bg-transparent">\n`
-    + '<div class="sticky-top site-nav-spacer viewport-height-90 scrollable slim-scroll">'
+    + '<div class="position-sticky position-top site-nav-spacer viewport-height-90 scrollable slim-scroll">'
     + `${siteNavDataSelector.html()}\n`
     + '</div>\n'
     + '</nav>';
@@ -681,7 +681,7 @@ Page.prototype.buildPageNav = function () {
     const pageNavHeadingHTML = this.generatePageNavHeadingHtml();
     this.pageSectionsHtml[`#${PAGE_NAV_ID}`] = htmlBeautify(
       `<nav id="${PAGE_NAV_ID}" class="navbar navbar-light bg-transparent">\n`
-      + '<div class="sticky-top spacer-top viewport-height-90 scrollable slim-scroll">\n'
+      + '<div class="position-sticky position-top spacer-top viewport-height-90 scrollable slim-scroll">\n'
       + `${pageNavTitleHtml}\n`
       + '<nav class="nav nav-pills flex-column my-0 small no-flex-wrap">\n'
       + `${pageNavHeadingHTML}\n`

diff --git a/test/functional/test_site/expected/index.html b/test/functional/test_site/expected/index.html
@@ -45,7 +45,7 @@
     </header>
     <div id="flex-body">
       <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="sticky-top site-nav-spacer viewport-height-90 scrollable slim-scroll">
+        <div class="position-sticky position-top site-nav-spacer viewport-height-90 scrollable slim-scroll">
           <ul class="px-0 site-nav-list">
             <li class="mt-2">
               <h2 id="navigation">Navigation<a class="fa fa-anchor" href="#navigation"></a></h2>
@@ -454,7 +454,7 @@ <h2 class="no-index" id="level-2-header-inside-headingsearchindex-with-no-index-
         <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-always-index-attribute-should-be-indexed">Level 6 header (outside headingSearchIndex) with always-index attribute should be indexed</h6>
       </div>
       <nav id="page-nav" class="navbar navbar-light bg-transparent">
-        <div class="sticky-top spacer-top viewport-height-90 scrollable slim-scroll">
+        <div class="position-sticky position-top spacer-top viewport-height-90 scrollable slim-scroll">
           <a class="navbar-brand page-nav-title" href="#">Testing Page Navigation</a>
           <nav class="nav nav-pills flex-column my-0 small no-flex-wrap">
             <a class="nav-link py-1" href="#variables-that-reference-another-variable">Variables that reference another variable&#x200E;</a>

diff --git a/test/functional/test_site/expected/markbind/css/markbind.css b/test/functional/test_site/expected/markbind/css/markbind.css
@@ -131,6 +131,10 @@ footer {
     max-height: 90vh;
 }
 
+.position-top {
+    top: 0;
+}
+
 /* Bootstrap small(sm) responsive breakpoint */
 @media (max-width: 767.98px) {
     .dropdown-menu > li > a {

diff --git a/test/functional/test_site/expected/testLayouts.html b/test/functional/test_site/expected/testLayouts.html
@@ -26,7 +26,7 @@
   <div id="app">
     <div id="flex-body">
       <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="sticky-top site-nav-spacer viewport-height-90 scrollable slim-scroll">
+        <div class="position-sticky position-top site-nav-spacer viewport-height-90 scrollable slim-scroll">
           <ul class="px-0 site-nav-list">
             <li class="mt-2">[Layout Nav]</li>
           </ul>

diff --git a/test/functional/test_site/expected/testLayoutsOverride.html b/test/functional/test_site/expected/testLayoutsOverride.html
@@ -26,7 +26,7 @@
   <div id="app">
     <div id="flex-body">
       <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="sticky-top site-nav-spacer viewport-height-90 scrollable slim-scroll">
+        <div class="position-sticky position-top site-nav-spacer viewport-height-90 scrollable slim-scroll">
           <ul class="px-0 site-nav-list">
             <li class="mt-2">[Layout Nav]</li>
           </ul>

diff --git a/test/functional/test_site_algolia_plugin/expected/index.html b/test/functional/test_site_algolia_plugin/expected/index.html
@@ -26,7 +26,7 @@
   <div id="app">
     <div id="flex-body">
       <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="sticky-top site-nav-spacer viewport-height-90 scrollable slim-scroll">
+        <div class="position-sticky position-top site-nav-spacer viewport-height-90 scrollable slim-scroll">
           <ul class="px-0 site-nav-list">
             <li class="mt-2"><a href="/test_site_algolia_plugin/index.html" class="site-nav__a current">Home <span aria-hidden="true" class="glyphicon glyphicon-home"></span></a></li>
           </ul>

diff --git a/test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css b/test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css
@@ -131,6 +131,10 @@ footer {
     max-height: 90vh;
 }
 
+.position-top {
+    top: 0;
+}
+
 /* Bootstrap small(sm) responsive breakpoint */
 @media (max-width: 767.98px) {
     .dropdown-menu > li > a {