I have been utilizing Bootstrap 3 to design a mobile view, and when working with a menu button in the mobile view, I noticed that it collapses and expands depending on the click of the menu button. However, now for the landing page, the client wants it to change to hover so that the content behind can be seen without having to toggle the click. Here is the HTML code:
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed btn-mobile" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="test">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right menu-mobile">
<li class="scroll active dropdown homeslider">
<a href="@Url.Action("Index", "Home")#homeslider" onclick="$('.scroll').removeClass('active');" class="dropbtn">@Resource.home</a>
</li>
</ul>
</div>
</div>
I realized that the
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"