title: Bootstrap 4 navbar dropdown menu item not clickable on mobile devices
body: <p>I've got a website being developed with Bootstrap 4. When viewing from a mobile device and the menu items have collapsed to the 3 bars, the menu items are not clickable. I've tried implementing it the way the bootstrap docs suggest, but it's still not working. I've tried some other tweaks to no avail.</p>
  
  <p>What am I doing wrong here (other than using the alpha version)?</p>
  
  <p>Here's the site where you can test it: <a href="http://www.wrestlestat.com" rel="nofollow noreferrer">http://www.wrestlestat.com</a></p>
  
  <p>Keep in mind, if you just resize your browser from a desktop to the mobile size, everything works fine, it only doesn't work when viewing from a mobile device.</p>
  
  <p>Here's the code for the navigation menus:</p>
  
  <pre><code>&lt;nav class="navbar navbar-fixed-top navbar-dark bg-inverse"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsemenus"&gt;
                  ☰
              &lt;/button&gt;
              &lt;a href="/" class="navbar-brand"&gt;
                  &lt;img alt="WrestleStat" src="/images/WrestleStat.png" height="35" asp-append-version="true" /&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="collapsemenus" class="collapse navbar-toggleable-xs"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li class="nav-item m-l-1 hidden-xs-down"&gt;
                      &lt;a class="nav-link donate" type="button"&gt;Donate&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item hidden-sm-up"&gt;
                      &lt;a class="nav-link donate" type="button"&gt;Donate&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a href="/team/select" class="nav-link" type="button"&gt;Teams&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item btn-group"&gt;
                      &lt;a class="dropdown-toggle nav-link" type="button" id="dropdown1" data-toggle="dropdown"&gt;Fantasy&lt;/a&gt;
                      &lt;div class="dropdown-menu background-black"&gt;
                          &lt;a href="#" class="dropdown-item"&gt;Pick'Em&lt;/a&gt;
                          &lt;!--/fantasy/thisweek--&gt;
                          &lt;a href="#" class="dropdown-item"&gt;Tourney Pool&lt;/a&gt;
                          &lt;!--/tourneypool/main--&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item btn-group"&gt;
                      &lt;a class="dropdown-toggle nav-link" type="button" id="dropdown2" data-toggle="dropdown"&gt;Compare&lt;/a&gt;
                      &lt;div class="dropdown-menu background-black"&gt;
                          &lt;a href="/compare/dual" class="dropdown-item"&gt;Dual Lineup&lt;/a&gt;
                          &lt;a href="/compare/wrestler" class="dropdown-item"&gt;Wrestlers&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item btn-group"&gt;
                      &lt;a class="dropdown-toggle nav-link" type="button" id="dropdown3" data-toggle="dropdown"&gt;Rankings&lt;/a&gt;
                      &lt;div class="dropdown-menu background-black"&gt;
                          &lt;a href="/rankings/wrestler" class="dropdown-item"&gt;Wrestlers&lt;/a&gt;
                          &lt;a href="/rankings/weight/125" class="dropdown-item p-l-3 hidden-sm-down"&gt;125&lt;/a&gt;
                          &lt;a href="/rankings/weight/133" class="dropdown-item p-l-3 hidden-sm-down"&gt;133&lt;/a&gt;
                          &lt;a href="/rankings/weight/141" class="dropdown-item p-l-3 hidden-sm-down"&gt;141&lt;/a&gt;
                          &lt;a href="/rankings/weight/149" class="dropdown-item p-l-3 hidden-sm-down"&gt;149&lt;/a&gt;
                          &lt;a href="/rankings/weight/157" class="dropdown-item p-l-3 hidden-sm-down"&gt;157&lt;/a&gt;
                          &lt;a href="/rankings/weight/165" class="dropdown-item p-l-3 hidden-sm-down"&gt;165&lt;/a&gt;
                          &lt;a href="/rankings/weight/174" class="dropdown-item p-l-3 hidden-sm-down"&gt;174&lt;/a&gt;
                          &lt;a href="/rankings/weight/184" class="dropdown-item p-l-3 hidden-sm-down"&gt;184&lt;/a&gt;
                          &lt;a href="/rankings/weight/197" class="dropdown-item p-l-3 hidden-sm-down"&gt;197&lt;/a&gt;
                          &lt;a href="/rankings/weight/285" class="dropdown-item p-l-3 hidden-sm-down"&gt;285&lt;/a&gt;
                          &lt;div class="dropdown-divider hidden-xs-down"&gt;&lt;/div&gt;
                          &lt;a href="/rankings/dual" class="dropdown-item"&gt;Dual Team&lt;/a&gt;
                          &lt;a href="/rankings/tournament" class="dropdown-item"&gt;Tournament Team&lt;/a&gt;
                          &lt;div class="dropdown-divider hidden-xs-down"&gt;&lt;/div&gt;
                          &lt;a href="#" class="dropdown-item"&gt;Statistical&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item btn-group"&gt;
                      &lt;a class="dropdown-toggle nav-link" type="button" id="dropdown4" data-toggle="dropdown"&gt;Profile&lt;/a&gt;
                      &lt;div class="dropdown-menu background-black"&gt;
                          &lt;a href="/account/login" class="dropdown-item"&gt;Login&lt;/a&gt;
                          &lt;a href="/account/register" class="dropdown-item"&gt;Register&lt;/a&gt;
                          &lt;a href="/account/forgotpassword" class="dropdown-item"&gt;Forgot Password&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Here's a bootply, but probably doesn't do much good since it must be on a mobile device to not work.</p>
  
  <p><a href="http://www.bootply.com/9Z9oycwCSh" rel="nofollow noreferrer">http://www.bootply.com/9Z9oycwCSh</a></p>