fix: update button width for collapsed menu

techfromsage · May 19, 2021 · 9969da5 · 9969da5
1 parent 9afb88a
commit 9969da5
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 15 deletions.
diff --git a/docs/assets/css/talis.css b/docs/assets/css/talis.css
diff --git a/docs/assets/css/talis.css.map b/docs/assets/css/talis.css.map
diff --git a/docs/forms/index.html b/docs/forms/index.html
@@ -51,16 +51,14 @@
           </button>
         </li>
         <li class="nav-item dropdown">
-          <a
+          <button
             class="nav-link dropdown-toggle"
-            href="#"
             id="navbarDropdown"
-            role="button"
             data-bs-toggle="dropdown"
             aria-expanded="false"
           >
                 Dropdown
-              </a>
+          </button>
           <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
             <li>
               <span class="dropdown-header">Dropdown header</span></li>

diff --git a/docs/index.html b/docs/index.html
@@ -51,16 +51,14 @@
           </button>
         </li>
         <li class="nav-item dropdown">
-          <a
+          <button
             class="nav-link dropdown-toggle"
-            href="#"
             id="navbarDropdown"
-            role="button"
             data-bs-toggle="dropdown"
             aria-expanded="false"
           >
                 Dropdown
-              </a>
+          </button>
           <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
             <li>
               <span class="dropdown-header">Dropdown header</span></li>

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
@@ -4,8 +4,10 @@
 }
 
 .navbar-nav button.nav-link {
-  background-color: $primary;
+  width: 100%;
   border: 0;
+  background-color: $primary;
+  text-align: left;
 }
 
 .navbar-dark .navbar-nav .nav-link:hover,

diff --git a/src/docs/_includes/partials/global/navbar.njk b/src/docs/_includes/partials/global/navbar.njk
@@ -31,16 +31,14 @@
           </button>
         </li>
         <li class="nav-item dropdown">
-          <a
+          <button
             class="nav-link dropdown-toggle"
-            href="#"
             id="navbarDropdown"
-            role="button"
             data-bs-toggle="dropdown"
             aria-expanded="false"
           >
                 Dropdown
-              </a>
+          </button>
           <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
             <li>
               <span class="dropdown-header">Dropdown header</span></li>