Fix mobile menu jump & double border

site/_includes/docs-sidebar.html

@@ -5,39 +5,41 @@
   </button>
 </form>
 
-<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation">
-  {%- assign page_slug = page.url | split: '/' | last -%}
-  {%- for group in site.data.nav -%}
-  {%- assign link = group.pages | first -%}
-  {%- assign link_slug = link.title | slugify -%}
-  {%- assign group_slug = group.title | slugify -%}
-  {%- assign active = nil -%}
+<div class="collapse d-md-block row" id="bd-docs-nav">
+  <nav class="bd-links" aria-label="Main navigation">
+    {%- assign page_slug = page.url | split: '/' | last -%}
+    {%- for group in site.data.nav -%}
+      {%- assign link = group.pages | first -%}
+      {%- assign link_slug = link.title | slugify -%}
+      {%- assign group_slug = group.title | slugify -%}
+      {%- assign active = nil -%}
 
-  {%- if page.group == group_slug -%}
-    {%- assign active = 'active' -%}
-  {%- endif -%}
+      {%- if page.group == group_slug -%}
+        {%- assign active = 'active' -%}
+      {%- endif -%}
 
-  <div class="bd-toc-item{% unless active == nil %} {{ active }}{% endunless %}">
-      <a class="bd-toc-link" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/{{ group_slug }}/{{ link_slug }}{% if link_slug %}/{% endif %}">
-        {{ group.title }}
-      </a>
+      <div class="bd-toc-item{% unless active == nil %} {{ active }}{% endunless %}">
+        <a class="bd-toc-link" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/{{ group_slug }}/{{ link_slug }}{% if link_slug %}/{% endif %}">
+          {{ group.title }}
+        </a>
 
-      <ul class="nav bd-sidenav">
-        {%- for doc in group.pages -%}
-          {%- assign doc_slug = doc.title | slugify -%}
-          {%- assign active = nil -%}
+        <ul class="nav bd-sidenav">
+          {%- for doc in group.pages -%}
+            {%- assign doc_slug = doc.title | slugify -%}
+            {%- assign active = nil -%}
 
-          {%- if page.group == group_slug and page_slug == doc_slug -%}
-            {%- assign active = 'active bd-sidenav-active' -%}
-          {%- endif -%}
+            {%- if page.group == group_slug and page_slug == doc_slug -%}
+              {%- assign active = 'active bd-sidenav-active' -%}
+            {%- endif -%}
 
-          <li{% unless active == nil %} class="{{ active }}"{% endunless %}>
-            <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/{{ group_slug }}/{{ doc_slug }}/">
-              {{ doc.title }}
-            </a>
-          </li>
-        {%- endfor -%}
-      </ul>
-    </div>
-  {%- endfor -%}
-</nav>
+            <li{% unless active == nil %} class="{{ active }}"{% endunless %}>
+              <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/{{ group_slug }}/{{ doc_slug }}/">
+                {{ doc.title }}
+              </a>
+            </li>
+          {%- endfor -%}
+        </ul>
+      </div>
+    {%- endfor -%}
+  </nav>
+</div>

site/docs/4.5/assets/scss/_sidebar.scss

@@ -66,10 +66,10 @@
 }
 
 .bd-links {
+  width: 100%;
   padding-top: 1rem;
   padding-bottom: 1rem;
-  margin-right: -15px;
-  margin-left: -15px;
+  border-top: 1px solid rgba(0, 0, 0, .05);
 
   @include media-breakpoint-up(md) {
     @supports (position: sticky) {
@@ -77,11 +77,6 @@
       overflow-y: auto;
     }
   }
-
-  // Override collapse behaviors
-  @include media-breakpoint-up(md) {
-    display: block !important;
-  }
 }
 
 .bd-search {
@@ -89,7 +84,6 @@
   padding: 1rem 15px;
   margin-right: -15px;
   margin-left: -15px;
-  border-bottom: 1px solid rgba(0, 0, 0, .05);
 
   .form-control:focus {
     border-color: $bd-purple-bright;