Having a strange issue with the mobile view in my Chrome dev tools. It's odd because the problem shows up on my friend's phone, but everything seems to be working fine on mine...
The problem specifically lies with the dropdown menus in my Bootstrap 4 navbar not expanding on the Chrome devtools mobile view.
You can check out the website here:
Below is the code snippet causing the issue:
<nav id="toprightnav" class="navbar navbar-light navbar-expand-md" role="navigation">
<button type="button" class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end ml-auto" id="navbar-collapse">
<ul class="nav navbar-nav align-items-end ml-auto d-lg-flex">
<li class="nav-item h-100 dropdown">
<a class="nav-link" role="button" aria-haspopup="true" aria-expanded="false" href="https://www.uvm.edu/femc/CI4/data" class="headernavli nav-link" >Data</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
<a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/data/index#contribute">Contribute Data</a>
<a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/data">Find Data</a>
<a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/products/collections">Collections</a>
<a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/data/live">Live Meteorological Data</a>
<a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/data_rescue">Data Rescue</a>
<a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/data/resources">Additional Data Resources</a>
<a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/data/user_guides">User Guides</a>
</div>
</li>
\[...]
</nav>
I did some research on Stack Overflow and it seems like there might be an element blocking the link, but I couldn't find anything suspicious in the devtools. Any insights on what could be causing this issue?