title: How to disable dropdown on hover when navbar's collapsed?
body: <p>I tried tu use this solution to disable dropdown on hover <strong>only when navbar is collapsed</strong>
  <a href="https://stackoverflow.com/questions/14907769/disable-dropdown-on-hover-for-bootstrap-when-navbar-is-collapsed">Disable dropdown on hover for bootstrap when navbar is collapsed</a>
  But it doesn't work correctly :(</p>
  
  <p>When I'm using page on mobile or tablets dropdown on hover is annoying. I want to make dropdown only by click when navbar is collapsed.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/*
   * Project: Twitter Bootstrap Hover Dropdown
   * Author: Cameron Spear
   * Contributors: Mattia Larentis
   *
   * Dependencies?: Twitter Bootstrap's Dropdown plugin
   *
   * A simple plugin to enable twitter bootstrap dropdowns to active on hover and provide a nice user experience.
   *
   * No license, do what you want. I'd love credit or a shoutout, though.
   *
   * http://cameronspear.com/blog/twitter-bootstrap-dropdown-on-hover-plugin/
   */
  ;
  (function($, window, undefined) {
    // outside the scope of the jQuery plugin to
    // keep track of all dropdowns
    var $allDropdowns = $();
  
    // if instantlyCloseOthers is true, then it will instantly
    // shut other nav items when a new one is hovered over
    $.fn.dropdownHover = function(options) {
  
      // the element we really care about
      // is the dropdown-toggle's parent
      $allDropdowns = $allDropdowns.add(this.parent());
  
      return this.each(function() {
        var $this = $(this).parent(),
          defaults = {
            delay: 500,
            instantlyCloseOthers: true
          },
          data = {
            delay: $(this).data('delay'),
            instantlyCloseOthers: $(this).data('close-others')
          },
          settings = $.extend(true, {}, defaults, options, data),
          timeout;
  
        $this.hover(function() {
          if (settings.instantlyCloseOthers === true)
            $allDropdowns.removeClass('open');
  
          window.clearTimeout(timeout);
          $(this).find('.dropdown-menu').filter(':first').slideDown();
          $(this).addClass('open');
        }, function() {
          timeout = window.setTimeout(function() {
            $this.find('.dropdown-menu').slideUp();
            $this.removeClass('open');
          }, settings.delay);
        });
      });
    };
  
    // apply dropdownHover to all elements with the data-hover="dropdown" attribute
    $(document).ready(function() {
      $('[data-hover="dropdown"]').dropdownHover();
    });
  })(jQuery, this);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>// Custom styles
   html {
    position: relative;
    min-height: 100%;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: 'Open Sans', sans-serif;
  }
  // a {
  //  text-decoration: none !important;
  // }
   .overflow {
    overflow: hidden;
  }
  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    clear: both;
  }
  .navigation {
    -webkit-box-shadow: inset 0px -2px 0px 0px #d3cdc4;
    -moz-box-shadow: inset 0px -2px 0px 0px #d3cdc4;
    box-shadow: inset 0px -2px 0px 0px #d3cdc4;
  }
  .navbar {
    margin-bottom: 0;
    position: relative;
    a {
      text-shadow: none !important;
      color: @gray !important;
      cursor: default !important;
      font-weight: 400;
      font-size: 15px;
    }
    .nav {
      text-shadow: none !important;
      margin-top: 34px;
      .info {
        a {
          padding: 0 0 0 5px;
        }
        span {
          padding: 0 !important;
          top: 12px;
          font-size: 16px;
          color: @projectLightBlue;
  
        }
      }
      .active {
        a {
          background: none !important;
          border-bottom: 2px solid@projectLightBlue;
  
  color: @projectLightBlue !important;
          text-shadow: none;
          .box-shadow(none);
          &amp;: hover {
            .box-shadow(none);
          }
        }
      }
      .non-active {
        a {
          background: none !important;
          border-bottom: 2px solid transparent;
          text-shadow: none;
          .box-shadow(none);
        }
      }
    }
    .navbar-info {
      position: absolute;
      right: 0;
      margin-top: 5px;
      color: @grayLight;
  
  a {
        color: @grayLight !important;
        font-size: 14px;
      }
      span {
        font-size: 12px;
        color: @grayLight;
  
      }
      .glyphicon-phone-alt {
        top: 0px;
      }
    }
    .dropdown {
      border-bottom: none !important;
      // .caret {
      //  border-top-color: @gray !important;
      // }
      span {
        font-size: 8px;
        top: -2px;
      }
      .dropdown-menu {
        margin: 0;
        padding: 0;
        border: 1px solid #eee;
        -webkit-box-shadow: 0px -2px 0px 0px@projectLightBlue;
  
  -moz-box-shadow: 0px -2px 0px 0px@projectLightBlue;
  
  box-shadow: 0px -2px 0px 0px@projectLightBlue;
  
  background: @white;
  
  .border-radius(0);
        font-size: 13px !important;
        &amp;: before, &amp;: after {
          content: none !important;
        }
        li {
          margin-left: 0px;
        }
        a {
          padding: 5px 15px;
          color: @gray !important;
          font-weight: 400;
          border-bottom: none !important;
          .transition(all 0.3s);
          &amp;: hover {
            background: lighten(@gray, 10%) !important;
            color: @white !important;
          }
        }
        .active-dropdown {
          a {
            padding: 5px 15px;
            background: lighten(@gray, 10%) !important;
            color: @white !important;
            font-weight: 400;
            border-bottom: none !important;
            .transition(all 0.3s);
          }
        }
      }
    }
    .open {
      .dropdown-toggle {
        background: none !important;
        border-bottom: 2px solid@projectLightBlue;
  
      }
    }
    .brand {
      padding: 25px 0;
      margin: 0;
      border-bottom: none;
      &amp;: hover {
        background: none !important;
      }
    }
    .navbar-inner {
      padding: 0;
      background: none;
      border: none;
      .border-radius(0);
      .box-shadow(none);
    }
    .btn-navbar {
      background: @projectLightBlue;
  
  margin: 40px 0 0 0;
      border: none;
      .border-radius(0);
      &amp;: hover {
        background: @gray !important;
      }
    }
  }
  .slider-underline {
    border-bottom: 2px solid #d3cdc4;
    // height: 2px;
    // width: 100%;
    // background: #d3cdc4;
    // position: absolute;
  
  }
  .reason {
    overflow: hidden;
    margin-bottom: 10px;
    padding: 15px 15px 10px;
  }
  @media (max-width: @navbarCollapseWidth) {
    body {
      width: 100%;
      padding: 0;
      margin: 0;
    }
    .navbar {
      .brand {
        padding-left: 10px !important;
      }
      .navbar-info {
        padding-right: 10px !important;
      }
      .btn-navbar {
        margin-right: 10px !important;
      }
      .nav {
        margin-top: 0;
        a {
          .border-radius(0) !important;
          font-weight: 400 !important;
          border-bottom: 1px solid@grayLighter !important;
          margin-bottom: 0px !important;
        }
        .active {
          a {
            border-bottom: none !important;
            background: @projectLightBlue !important;
            color: @white !important;
            text-shadow: none;
            .box-shadow(none);
            &amp;: hover {
              .box-shadow(none);
            }
          }
        }
        .active,
        .non-active {
          .dropdown-menu {
            a {
              background: none !important;
              color: @grayLight !important;
              padding-left: 25px;
              &amp;: hover {
                color: @gray !important;
              }
            }
            .active-dropdown {
              background: @grayLight !important;
              a {
                color: @white !important;
              }
            }
          }
        }
        .dropdown-menu {
          .box-shadow (none);
          border: none !important;
          a {
            border-bottom: 1px solid@grayLighter !important;
          }
        }
        .last {
          a {
            border-bottom: none !important;
          }
        }
        .info {
          display: none;
        }
      }
    }
  }
  @media (min-width: 768px) and (max-width: 979px) {
    .navbar {
      .brand {
        padding-left: 0px !important;
      }
      .navbar-info {
        padding-right: 0px !important;
      }
      .btn-navbar {
        margin-right: 0px !important;
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wide navigation"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="span12"&gt;
          &lt;div class="navbar"&gt;
            &lt;div class="navbar-inner"&gt;
              &lt;div class="container"&gt;
  
                &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
                &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&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;/a&gt;
  
                &lt;!-- Be sure to leave the brand out there if you want it shown --&gt;
                &lt;a class="brand pull-left" href="#"&gt;LOGO&lt;/a&gt;
  
  
                &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
                &lt;div class="nav-collapse collapse"&gt;
                  &lt;ul class="nav pull-right"&gt;
                    &lt;li class="dropdown active"&gt;
                      &lt;a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0"&gt;
              HOME
              &lt;span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true"&gt;
             &lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                        &lt;li class="active-dropdown"&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class="last"&gt;&lt;a href="#"&gt;Option 3&lt;/a&gt;
                        &lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li class="dropdown non-active"&gt;
                      &lt;a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0"&gt;
              YOUR SERVICES
              &lt;span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true"&gt;
             &lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class="last"&gt;&lt;a href="#"&gt;Option 3&lt;/a&gt;
                        &lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li class="dropdown non-active"&gt;
                      &lt;a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0"&gt;
              PRICE-LIST
              &lt;span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true"&gt;
             &lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class="last"&gt;&lt;a href="#"&gt;Option 3&lt;/a&gt;
                        &lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li class="dropdown non-active"&gt;
                      &lt;a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0"&gt;
              GALLERY
              &lt;span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true"&gt;
             &lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class="last"&gt;&lt;a href="#"&gt;Option 3&lt;/a&gt;
                        &lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li class="dropdown non-active last"&gt;
                      &lt;a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0"&gt;
              CONTACT
              &lt;span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true"&gt;
             &lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class="last"&gt;&lt;a href="#"&gt;Option 3&lt;/a&gt;
                        &lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li class="info visible-lg-*"&gt;
                      &lt;a href="#" data-toggle="modal" data-target="#nuca"&gt;&lt;span class="glyphicon glyphicon-info-sign" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt;
                    &lt;/li&gt;
  
                    &lt;!-- Modal --&gt;
                    &lt;div id="nuca" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
                      &lt;div class="modal-header"&gt;
                        &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
                        &lt;h3 id="myModalLabel"&gt;Nuca Template&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;
                        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, reiciendis laborum tenetur, animi architecto ullam facere amet cum quia, quo aut blanditiis quod ut minima aliquid excepturi, quam perspiciatis omnis. Consequuntur
                          eos, odit molestiae similique reiciendis at cumque eius libero, distinctio repellendus quia perferendis, quod facilis quae ad ab ducimus officia. Minus perspiciatis quia velit, ab doloremque quasi iusto accusantium praesentium
                          tenetur, obcaecati aperiam accusamus labore aut commodi nisi sunt! Earum consectetur quibusdam culpa, assumenda praesentium cum, modi eligendi magnam laborum voluptatibus nemo animi a ducimus voluptatem. Earum culpa excepturi expedita
                          tempore in accusamus doloribus impedit fugiat. Laboriosam, placeat, eveniet.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-footer"&gt;
                        &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Zamknij&lt;/button&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
                &lt;!-- nav-collapse --&gt;
  
              &lt;/div&gt;
              &lt;!-- /container --&gt;
            &lt;/div&gt;
            &lt;!-- /navbar-inner --&gt;
          &lt;/div&gt;
          &lt;!-- /navbar --&gt;
        &lt;/div&gt;
        &lt;!-- /span12 --&gt;
      &lt;/div&gt;
      &lt;!-- /row --&gt;
    &lt;/div&gt;
    &lt;!-- /container --&gt;
  &lt;/div&gt;
  &lt;!-- /wide --&gt;</code></pre>
  </div>
  </div>
  </p>