Bootstrap 3: how to make head of dropdown link clickable in navbar

Question

I\'m using the default navbar and a couple of the list items are dropdowns. I\'m not able to click the link that triggers the dropdown. I know that I could just add a duplic

Answer 1

Most of the above solutions are not mobile friendly.

The solution I am proposing detects if its not touch device and that the navbar-toggle (hamburger menu) is not visible and makes the parent menu item revealing submenu on hover and and follow its link on click

Also makes tne margin-top 0 because the gap between the navbar and the menu in some browser will not let you hover to the subitems

$(function(){
    function is_touch_device() {
        return 'ontouchstart' in window        // works on most browsers 
        || navigator.maxTouchPoints;       // works on IE10/11 and Surface
    };

    if(!is_touch_device() && $('.navbar-toggle:hidden')){
      $('.dropdown-menu', this).css('margin-top',0);
      $('.dropdown').hover(function(){ 
          $('.dropdown-toggle', this).trigger('click').toggleClass("disabled"); 
      });			
    }
});

    
menuA
    
menuB
    
menuC
        

            
A
            
B
            
C
            
D
        
    
    
menuD
    
menuE

$(function(){
  $("#nav .dropdown").hover(
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
      $(this).toggleClass('open');
    },
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
      $(this).toggleClass('open');
    });
});

    
menuA
    
menuB
    
menuC
        

            
A
            
B
            
C
            
D
        
    
    
menuD
    
menuE