I'm attempting to create a modal navigation bar for mobile view but encountering an issue. When I click on the icon bar or menu bar in mobile view, none of the buttons inside the modal are responding. I'm quite stuck on this and would appreciate any help. Thank you in advance.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="height: 100vh !important">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body" style="height: 100vh; opacity:1">
<button type="button" class="close" data-dismiss="modal" >×</button>
<ul class="nav navbar-nav navbar-right hidden-lg hidden-md" >
<li><a href="#myPage">HOME1</a></li>
<li><a href="#band">BAND1</a></li>
<li><a href="#tour">TOUR1</a></li>
<li><a href="#contact">CONTACT</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Merchandise</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Media</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="bg-img-hero">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myModal">
<span class="icon-bar" style="color: yellow !important"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right" >
<li ><a href="HowItWorks.html" style="color: white !important">HOME</a></li>
<li><a href="#band" style="color: white !important">BAND</a></li>
<li><a href="#tour" style="color: white !important">TOUR</a></li>
<li><a href="#contact" style="color: white !important">CONTACT</a></li>
</ul>
</div>
<div class="collapse navbar-collapse" id="myNavbar1">
<ul class="nav navbar-nav navbar-right hidden-lg hidden-md" >
<li><a href="HowItWorks.html">HOME1</a></li>
<li><a href="#band">BAND1</a></li>
<li><a href="#tour">TOUR1</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
</div>