I'm having trouble getting a Twitter Bootstrap 3 navbar to collapse using data attributes, as it is not expanding properly.
Just to give some context, the project I am working on is an ASP.NET C# MVC project that runs on DNN (DotNetNuke) CMS.
When I manually trigger the collapse method using JavaScript, it works correctly. For example:
$('#main-menu').collapse()
This makes me think that the JavaScript files are functioning correctly and there may be an issue with the data attributes. I have compared each element to a working example and cannot pinpoint what might be causing the problem. Here is the compiled HTML:
<nav class="navbar navbar-default navbar-style">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-target="#main-menu-collapse" data-toggle="collaspe" 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 class="collapse navbar-collapse" id="main-menu-collapse">
<ul class="nav navbar-nav">
<li><a href="http://localhost:801/">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">BG New Page <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="http://localhost:801/BG-New-Page/Some-Page">Some Page</a></li>
<li><a href="http://localhost:801/BG-New-Page/Some-More-Context">Some More Context</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
On a side note, removing the navbar-style class does not make any difference.