Bootstrap Bug with Offcanvas - html

Question

I'm trying to add offcanvas to my bootstrap navigation, the responsive works perfectly but the dropdown menu doesn't work when i try the desktop resolution.
The problem seems to be the "bootstrap.offcanvas.js".
When I delete the "bootstrap.offcanvas.js", it works.
Any idea to resolve this problem?
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container menu-height">
<div class="navbar-header">
<button type="button" class="navbar-toggle offcanvas-toggle pull-right" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<object width="98px" data="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" title="xxxxxxxxxxxxxxxxxxxxxxxxxxxx" type="image/svg+xml"></object>
</div>
<!--/.navbar-header -->
<div class="navbar-offcanvas" id="js-bootstrap-offcanvas">
<ul class="nav navbar-nav">
<li class="dropdown">
xxxxxxxxx <b class="caret"></b>
<ul class="dropdown-menu" >
<li>xxxxx</li>
<li class="divider"></li>
<li>xxxxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxxxxx</li>
</ul>
</li>
<li class="dropdown">
xxxxxxxxx<b class="caret"></b>
<ul class="dropdown-menu">
<li>xxxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxx</li>
</ul>
</li>
<li class="dropdown">
xxxxx <b class="caret"></b>
<ul class="dropdown-menu">
<li>xxxxxx</li>
<li class="divider"></li>
<li>xxxxxx</li>
<li class="divider"></li>
<li>xxxx</li>
<li class="divider"></li>
<li>xxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxx</li>
<li class="divider"></li>
<li>xxxxxx</li>
<li class="divider"></li>
<li>xxxxxxx</li>
<li class="divider"></li>
<li>xxxxxx</li>
</ul>
</li>
<li class="responsive-online-shop"><div class="box-online-shop"><a class="nav-link btn btn-secondary-outline btn-secondary" href="xxxxxx">xxxxxx</a></div></li>
<li><div class="box-online-flag"><object data="xxxxxxxxxxxxx" type="image/svg+xml"></object><span class="flag-responsive hidden-lg">xxxxxxx</span></div></li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</nav>

Answer 1

<
<nav class="navbar navbar-default navbar-offcanvas navbar-offcanvas-touch" role="navigation" id="js-bootstrap-offcanvas">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Another Link <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Another Link <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li>Another Link</li>
</ul>
</div>
</div>
</nav>
</header>
nav class="navbar navbar-default navbar-offcanvas navbar-offcanvas-touch" role="navigation" id="js-bootstrap-offcanvas">
Brand
Link
Link
Another Link
Action
Another action
Something else here
Separated link
One more separated link
Another Link
Action
Another action
Something else here
Separated link
One more separated link
Submit
Link
Another Link