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.
What am I doing wrong here (other than using the alpha version)?
Here's the site where you can test it: http://www.wrestlestat.com
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.
Here's the code for the navigation menus:
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsemenus">
?
</button>
<a href="/" class="navbar-brand">
<img alt="WrestleStat" src="/images/WrestleStat.png" height="35" asp-append-version="true" />
</a>
</div>
<div id="collapsemenus" class="collapse navbar-toggleable-xs">
<ul class="nav navbar-nav">
<li class="nav-item m-l-1 hidden-xs-down">
<a class="nav-link donate" type="button">Donate</a>
</li>
<li class="nav-item hidden-sm-up">
<a class="nav-link donate" type="button">Donate</a>
</li>
<li class="nav-item">
<a href="/team/select" class="nav-link" type="button">Teams</a>
</li>
<li class="nav-item btn-group">
<a class="dropdown-toggle nav-link" type="button" id="dropdown1" data-toggle="dropdown">Fantasy</a>
<div class="dropdown-menu background-black">
<a href="#" class="dropdown-item">Pick'Em</a>
<!--/fantasy/thisweek-->
<a href="#" class="dropdown-item">Tourney Pool</a>
<!--/tourneypool/main-->
</div>
</li>
<li class="nav-item btn-group">
<a class="dropdown-toggle nav-link" type="button" id="dropdown2" data-toggle="dropdown">Compare</a>
<div class="dropdown-menu background-black">
<a href="/compare/dual" class="dropdown-item">Dual Lineup</a>
<a href="/compare/wrestler" class="dropdown-item">Wrestlers</a>
</div>
</li>
<li class="nav-item btn-group">
<a class="dropdown-toggle nav-link" type="button" id="dropdown3" data-toggle="dropdown">Rankings</a>
<div class="dropdown-menu background-black">
<a href="/rankings/wrestler" class="dropdown-item">Wrestlers</a>
<a href="/rankings/weight/125" class="dropdown-item p-l-3 hidden-sm-down">125</a>
<a href="/rankings/weight/133" class="dropdown-item p-l-3 hidden-sm-down">133</a>
<a href="/rankings/weight/141" class="dropdown-item p-l-3 hidden-sm-down">141</a>
<a href="/rankings/weight/149" class="dropdown-item p-l-3 hidden-sm-down">149</a>
<a href="/rankings/weight/157" class="dropdown-item p-l-3 hidden-sm-down">157</a>
<a href="/rankings/weight/165" class="dropdown-item p-l-3 hidden-sm-down">165</a>
<a href="/rankings/weight/174" class="dropdown-item p-l-3 hidden-sm-down">174</a>
<a href="/rankings/weight/184" class="dropdown-item p-l-3 hidden-sm-down">184</a>
<a href="/rankings/weight/197" class="dropdown-item p-l-3 hidden-sm-down">197</a>
<a href="/rankings/weight/285" class="dropdown-item p-l-3 hidden-sm-down">285</a>
<div class="dropdown-divider hidden-xs-down"></div>
<a href="/rankings/dual" class="dropdown-item">Dual Team</a>
<a href="/rankings/tournament" class="dropdown-item">Tournament Team</a>
<div class="dropdown-divider hidden-xs-down"></div>
<a href="#" class="dropdown-item">Statistical</a>
</div>
</li>
<li class="nav-item btn-group">
<a class="dropdown-toggle nav-link" type="button" id="dropdown4" data-toggle="dropdown">Profile</a>
<div class="dropdown-menu background-black">
<a href="/account/login" class="dropdown-item">Login</a>
<a href="/account/register" class="dropdown-item">Register</a>
<a href="/account/forgotpassword" class="dropdown-item">Forgot Password</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
Here's a bootply, but probably doesn't do much good since it must be on a mobile device to not work.
http://www.bootply.com/9Z9oycwCSh
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…