WVU Nav Dropdowns breaks Bootstrap dropdowns

[adamjohnson]

The problem

Today @rebecca-patton found out that the WVU dropdown navigation we use in the design system shares a class with Bootstrap dropdowns: .dropdown-toggle.

If someone wants to use a Bootstrap dropdown, the styles from the WVU Nav Dropdowns hide the Bootstrap dropdown (via display: none;, here's the relevant line).

The fix

To fix this, we should re-name the .dropdown-toggle class in the WVU Nav Dropdowns to something else.

Here's a (not very semantic) Bootstrap dropdown to test with:

  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Services
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <div class="dropdown-header">Service Options</div> <!-- Heading? -->
      <a class="dropdown-item" href="#">Item 1</a> <!-- List?? -->
      <a class="dropdown-item" href="#">Item 2</a>
      <a class="dropdown-item" href="#">Item 3</a>
      <a class="dropdown-item" href="#">Item 4</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Other</a>
    </div>
  </div>

[zeroedin]

This has been a problem for quite awhile. Here is how I fix it in my applications. First, comment out old file, create a custom/_wuv-nav-dropdowns.scss

Here is the diff between the two: https://www.diffchecker.com/btF7IsI2

Then you'll need to fix any reference in navbar html classes from the following list

.dropdown to .wvu-dropdown
.dropdown-toggle to .wvu-dropdown-toggle
.dropdown-active to .wvu-dropdown-active

The better fix would be to remove this navbar and replace it with bootstraps navbar. This has come up in several conversation before. I know hover menus have been part of the conversation of why it hasn't been done prior, but there are fixes for that https://codepen.io/tutsplus/details/eYOGmeE