title: Bootstrap Bug with Offcanvas
body: <p>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.</p>
  
  <p>The problem seems to be the "bootstrap.offcanvas.js".</p>
  
  <p>When I delete the "bootstrap.offcanvas.js", it works.</p>
  
  <p>Any idea to resolve this problem?</p>
  
  <pre><code>    &lt;nav class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
   &lt;div class="container menu-height"&gt;
      &lt;div class="navbar-header"&gt;
              &lt;button type="button"  class="navbar-toggle offcanvas-toggle pull-right" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
  
                          &lt;a href="https://www.irislink.com" class="navbar-brand"&gt;&lt;object width="98px" data="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" title="xxxxxxxxxxxxxxxxxxxxxxxxxxxx" type="image/svg+xml"&gt;&lt;/object&gt;&lt;/a&gt;
  
  
          &lt;/div&gt;
          &lt;!--/.navbar-header --&gt;
  
          &lt;div class="navbar-offcanvas" id="js-bootstrap-offcanvas"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;xxxxxxxxx &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu" &gt;
                          &lt;li&gt;&lt;a href="#"&gt;xxxxx&lt;/a&gt;&lt;/li&gt;
                           &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;xxxxxxxxxx&lt;/a&gt;&lt;/li&gt;
                           &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;xxxxxxxxxxx&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;xxxxxxxxxxx&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                 &lt;li class="dropdown"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;xxxxxxxxx&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;xxxxxxxxx&lt;/a&gt;&lt;/li&gt;
                           &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;xxxxxxx&lt;/a&gt;&lt;/li&gt;
                           &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;xxxxxxxxxx&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;xxxxxxx&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;xxxxxxxxxxx&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;xxxxxxxx&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;xxxxxxxx&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                 &lt;li class="dropdown"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;xxxxx &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;xxxxxx&lt;/a&gt;&lt;/li&gt;
                           &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;xxxxxx&lt;/a&gt;&lt;/li&gt;
                           &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;xxxx&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;xxxxxxx&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;xxxxxxx&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;xxxxxx&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;xxxxxxx&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;xxxxxx&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li class="responsive-online-shop"&gt;&lt;div class="box-online-shop"&gt;&lt;a class="nav-link btn btn-secondary-outline btn-secondary" href="xxxxxx"&gt;xxxxxx&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;div class="box-online-flag"&gt;&lt;object data="xxxxxxxxxxxxx" type="image/svg+xml"&gt;&lt;/object&gt;&lt;span class="flag-responsive hidden-lg"&gt;xxxxxxx&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
          &lt;/div&gt;
          &lt;!--/.navbar-collapse --&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>