more responsive docs nav

2 files changed, 54 insertions, 74 deletions

diff --git a/docs/_includes/nav-home.html b/docs/_includes/nav-home.html
index 828c664a8..af57e1679 100644
--- a/docs/_includes/nav-home.html
+++ b/docs/_includes/nav-home.html
@@ -1,78 +1,53 @@
 <header class="navbar navbar-light navbar-sticky-top navbar-expand-md bd-navbar">
-    {% comment %}
-    <nav class="nav navbar-nav float-right">
-      <div class="nav-item dropdown">
-        <a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          v{{ site.current_version }}
-        </a>
-        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
-          <a class="dropdown-item" href="#">v4.0.0-alpha.2</a>
-          <a class="dropdown-item" href="#">v3.3.5</a>
-          <a class="dropdown-item" href="#">v3.3.4</a>
-          <a class="dropdown-item" href="#">v3.3.2</a>
-          <a class="dropdown-item" href="#">v3.3.1</a>
-          <a class="dropdown-item" href="#">v3.3.0</a>
-          <a class="dropdown-item" href="#">v3.2.0</a>
-          <a class="dropdown-item" href="#">v3.1.1</a>
-          <a class="dropdown-item" href="#">v3.1.0</a>
-          <a class="dropdown-item" href="#">v3.0.3</a>
-          <a class="dropdown-item" href="#">v3.0.2</a>
-          <a class="dropdown-item" href="#">v3.0.1</a>
-          <a class="dropdown-item" href="#">v3.0.0</a>
-        </div>
-      </div>
-    </nav>
-    {% endcomment %}
-
-    <div class="d-flex justify-content-between d-lg-none">
-      <a class="navbar-brand" href="{{ site.baseurl }}/">
-        Bootstrap
-      </a>
-      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-    </div>
+  <div class="d-flex w-100 align-items-center justify-content-between d-md-none bd-navbar-brand-wrap">
+    <a class="navbar-brand" href="{{ site.baseurl }}/">
+      Bootstrap
+    </a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+  </div>
 
-    <div class="collapse navbar-collapse" id="bd-main-nav">
-      <ul class="navbar-nav">
-        <li class="nav-item active">
-          <a class="nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="{{ site.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');">Themes</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
-        </li>
-      </ul>
+  <div class="collapse navbar-collapse" id="bd-main-nav">
+    <ul class="navbar-nav">
+      <li class="nav-item d-none d-md-block">
+        <a class="nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="{{ site.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');">Themes</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
+      </li>
+    </ul>
 
-      <ul class="navbar-nav ml-md-auto">
-        <li class="nav-item">
-          <a class="nav-link" href="{{ site.repo }}">
-            {% include icons/github.svg %}
-          </a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="https://twitter.com/{{ site.twitter }}">
-            {% include icons/twitter.svg %}
-          </a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="{{ site.slack }}">
-            {% include icons/slack.svg %}
-          </a>
-        </li>
-      </ul>
+    <ul class="navbar-nav flex-row ml-md-auto my-3 my-md-0">
+      <li class="nav-item">
+        <a class="nav-link p-2" href="{{ site.repo }}">
+          {% include icons/github.svg %}
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link p-2" href="https://twitter.com/{{ site.twitter }}">
+          {% include icons/twitter.svg %}
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link p-2" href="{{ site.slack }}">
+          {% include icons/slack.svg %}
+        </a>
+      </li>
+    </ul>
 
-      <a class="btn btn-primary ml-md-3" href="{{ site.download.source }}">Download</a>
-    </div>
+    <a class="btn btn-primary mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
+  </div>
 </header>
diff --git a/docs/assets/scss/_nav.scss b/docs/assets/scss/_nav.scss
index 42be331a6..b72f6de1a 100644
--- a/docs/assets/scss/_nav.scss
+++ b/docs/assets/scss/_nav.scss
@@ -10,7 +10,7 @@
   position: sticky;
   top: 0;
   z-index: 1030; // over everything in bootstrap
-  height: 4rem;
+  min-height: 4rem;
     // max-height: calc(100vh - 4rem);
     // overflow-y: auto;
   // }
@@ -54,4 +54,9 @@
   .navbar-brand {
     color: $bd-purple;
   }
+
+  .bd-navbar-brand-wrap {
+    padding-top: .25rem;
+    padding-bottom: .25rem;
+  }
 }