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 duplicate link into the dropdown but I d rather not  Is it possible to make the head link a clickable link  not just a handle for the dropdown    For reference  see the first link in the dropdown below  I want users to be able to click it and actually go to the page it points to    lt nav class  navbar navbar-fixed-top admin-menu  role  navigation  gt     lt div class  navbar-header  gt     lt  div gt      lt  -- Collect the nav links  forms  and other content for toggling -- gt      lt div class  collapse navbar-collapse  id  bs-example-navbar-collapse-1  gt        lt ul class  nav navbar-nav navbar-right  gt          lt li class  dropdown  gt            lt a class  dropdown-toggle  data-toggle  dropdown  href     gt             I DONT WORK   lt b class  caret  gt  lt  b gt            lt  a gt            lt ul class  dropdown-menu  gt              lt li gt  lt a href   page2  gt Page2 lt  a gt  lt  li gt            lt  ul gt          lt  li gt          lt li gt  lt a href     gt I DO WORK lt  a gt  lt  li gt        lt  ul gt                     lt  div gt  lt  --   navbar-collapse -- gt    lt  nav gt

User · Answer

1  remove dropdown-trigger    data-toggle  dropdown    2  add this your css   dropdown hover  dropdown-menu       display  block     dropdown-menu       margin-top  0px      posted for the people how stumbled upon this

User · Answer

This worked in my case      a data-toggle  dropdown     on  click   function          var  el     this        if    el is   hover                if    el length  amp  amp   el attr  href                   location href   el attr  href

User · Answer

Here is my solution which uses JQuery in your header  and works on Mobile   On mobile the top links require two taps  one to dropdown the menu and one to go to its link    x000D   x000D    function    x000D        dropdown-toggle   click  x000D      function    x000D        if    this  next   is   visible      x000D          location href     this  attr  href     x000D          x000D           x000D        x000D      x000D   x000D   x000D

User · Answer

Here is a small hack based on Bootstrap 3 3 using a bit jQuery   A click on a opened dropdown-menu executes the link      li dropdown   on  click   function         var  el     this       if   el hasClass  open              var  a    el children  a dropdown-toggle            if   a length  amp  amp   a attr  href                  location href    a attr  href

User · Answer

Anyone arriving here who wants the quick answer to this problem  Replace the  Dropdown prototype toggle  function in your bootstrap js  or dropdown js  with the following     Dropdown prototype toggle   function  e    var  this     this   if   this is   disabled   disabled    return  var  parent    getParent  this  var isActive    parent hasClass  open    clearMenus    if   isActive        if   ontouchstart  in document documentElement  amp  amp    parent closest   navbar-nav   length               if mobile we use a backdrop because click events don t delegate             lt div class  dropdown-backdrop   gt    insertAfter   this   on  click   clearMenus             var relatedTarget     relatedTarget  this        parent trigger e     Event  show bs dropdown   relatedTarget        if  e isDefaultPrevented    return       parent        toggleClass  open          trigger  shown bs dropdown   relatedTarget        this focus     else       var href    this attr  href   trim         if  href    undefined  amp  amp  href      javascript             window location href   href     return false       On the second click  ie  if the menu item has the class  open   it will first check if the href is undefined or set to  javascript    before sending you along your merry way   Enjoy

User · Answer

Add disabled Class in your anchor  following are js       navbar  dropdown-toggle   hover function         this  addClass  disabled          But this is not mobile friendly so you need to remove disabled class for mobile  so updated js code is following       navbar  dropdown-toggle   hover function       if  document documentElement clientWidth  gt  769      this  addClass  disabled       else     this  removeClass  disabled

User · Answer

Just add the class disabled on your anchor    lt a class  dropdown-toggle disabled  href   your link   gt  Dropdown lt  a gt    And you are free to go

User · Answer

Here this the code which slides down the sub menu on hover  and let you redirect to a page if you click on it   How  strip out class  dropdown-toggle  data-toggle  dropdown  from a tag  and add css   Here is the demo at jsfiddle  For demo  please adjust jsfiddle s splitter to see the dropdown due to Bootstrap CSS  jsfiddle won t let you redirect to a new page      lt  DOCTYPE html gt   lt html gt   lt head gt       lt meta http-equiv  content-type  content  text html  charset UTF-8  gt       lt link rel  stylesheet  type  text css  href  http   netdna bootstrapcdn com bootstrap 3 0 2 css bootstrap min css  gt       lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 7 1 jquery min js  gt  lt  script gt       lt script type  text javascript  src  http   netdna bootstrapcdn com bootstrap 3 0 2 js bootstrap min js  gt  lt  script gt       lt style type  text css  gt          ul nav li dropdown hover ul dropdown-menu               display  block                 lt  style gt   lt  head gt   lt body gt       lt nav class  navbar navbar-fixed-top admin-menu  role  navigation  gt           lt div class  navbar-header  gt     lt  div gt           lt  -- Collect the nav links  forms  and other content for toggling -- gt           lt div class  collapse navbar-collapse  id  bs-example-navbar-collapse-1  gt               lt ul class  nav navbar-nav navbar-right  gt                   lt li class  dropdown  gt  lt a href  http   stackoverflow com   gt Stack Overflow  lt b class  caret  gt  lt  b gt  lt  a gt                        lt ul class  dropdown-menu  gt                           lt li gt  lt a href   page2  gt Page2 lt  a gt                           lt  li gt                       lt  ul gt                   lt  li gt                   lt li gt  lt a href     gt I DO WORK lt  a gt                   lt  li gt               lt  ul gt           lt  div gt           lt  --   navbar-collapse -- gt       lt  nav gt   lt  body gt   lt  html gt

User · Answer

This enables the link in the top-level menu of the dropdown when it s opened and disables it when closed  with the only drawback of apparently having to  tap  twice outside of the dropdown to close it in mobile devices     document  on  page load   function           body   on  show bs dropdown   function  e              e relatedTarget  addClass  disabled                  body   on  hide bs dropdown   function  e              e relatedTarget  removeClass  disabled                 Note this assumes the  standard  markup and Turbolinks  Rails   You can try with   document  ready

User · Answer

This topic is super old  but I needed a solution that worked on desktop AND mobile and none of these seemed to work for me  Unfortunately  this is the solution I came up with that involves checking the window width and comparing it to the mobile menu breakpoint      a dropdown-toggle    on   click   function  e         var  a      this             parent    a parent   li             mobile bp   767     Default breakpoint  may need to change this          window width      window   width            is mobile   window width  lt   mobile bp       if   is mobile  amp  amp     parent hasClass   open                e preventDefault            return false             location href    a attr   href         return true

User · Answer

This 100  works   HTML    lt li class  dropdown  gt             lt a href  https   www bkweb co in   class  dropdown-toggle   gt bkWeb co in Dropdown  lt span class  caret  gt  lt  span gt  lt  a gt             lt ul class  dropdown-menu  gt               lt li gt  lt a href     gt Action lt  a gt  lt  li gt               lt li gt  lt a href     gt Another action lt  a gt  lt  li gt               lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt               lt li role  separator  class  divider  gt  lt  li gt               lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt               lt li role  separator  class  divider  gt  lt  li gt               lt li gt  lt a href     gt One more separated link lt  a gt  lt  li gt             lt  ul gt           lt  li gt    CSS    media  min-width 991px     ul nav li dropdown hover ul dropdown-menu       display  block          EXAMPLE in CODEPEN

User · Answer

I know this is a little old  but I recently came across this while looking for a similar solution  Relying on hover events isn t good for responsive design  and especially terrible on mobile touch screens  I ended up making a small edit to the dropdown js file the allows you to click the menu item to open the menu and if you click the menu item again it will follow it   The nice thing about this is it doesn t rely on hover at all and so it still works really nicely on a touch screen   I ve posted it here  https   github com mrhanlon twbs-dropdown-doubletap blob master js dropdown-doubletap js  Hope that helps

User · Answer

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   x000D   x000D    function    x000D      function is touch device     x000D          return  ontouchstart  in window           works on most browsers  x000D             navigator maxTouchPoints           works on IE10 11 and Surface x000D         x000D   x000D      if  is touch device    amp  amp      navbar-toggle hidden     x000D            dropdown-menu   this  css  margin-top  0   x000D            dropdown   hover function     x000D                dropdown-toggle   this  trigger  click   toggleClass  disabled     x000D               x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt ul id  nav  class  nav nav-pills clearfix right  role  tablist  gt  x000D       lt li gt  lt a href     gt menuA lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt menuB lt  a gt  lt  li gt  x000D       lt li class  dropdown  gt  lt a href     class  dropdown-toggle  data-toggle  dropdown  gt menuC lt  a gt  x000D           lt ul id  products-menu  class  dropdown-menu clearfix  role  menu  gt  x000D               lt li gt  lt a href    gt A lt  a gt  lt  li gt  x000D               lt li gt  lt a href    gt B lt  a gt  lt  li gt  x000D               lt li gt  lt a href    gt C lt  a gt  lt  li gt  x000D               lt li gt  lt a href    gt D lt  a gt  lt  li gt  x000D           lt  ul gt  x000D       lt  li gt  x000D       lt li gt  lt a href     gt menuD lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt menuE lt  a gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D     x000D   x000D    function    x000D        nav  dropdown   hover  x000D      function     x000D            products-menu dropdown-menu   this  stop  true  true   fadeIn  fast    x000D          this  toggleClass  open    x000D         x000D      function     x000D            products-menu dropdown-menu   this  stop  true  true   fadeOut  fast    x000D          this  toggleClass  open    x000D          x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt ul id  nav  class  nav nav-pills clearfix right  role  tablist  gt  x000D       lt li gt  lt a href     gt menuA lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt menuB lt  a gt  lt  li gt  x000D       lt li class  dropdown  gt  lt a href     class  dropdown-toggle  data-toggle  dropdown  gt menuC lt  a gt  x000D           lt ul id  products-menu  class  dropdown-menu clearfix  role  menu  gt  x000D               lt li gt  lt a href    gt A lt  a gt  lt  li gt  x000D               lt li gt  lt a href    gt B lt  a gt  lt  li gt  x000D               lt li gt  lt a href    gt C lt  a gt  lt  li gt  x000D               lt li gt  lt a href    gt D lt  a gt  lt  li gt  x000D           lt  ul gt  x000D       lt  li gt  x000D       lt li gt  lt a href     gt menuD lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt menuE lt  a gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

Alternatively here s a simple jQuery solution       menu-main  gt  li  gt   dropdown-toggle   click function          window location     this  attr  href

User · Answer

No need of use addition CSS JS  Tested   data-toggle  quot dropdown quot  - for Clickable  can use Mobile as well web  data-hover  quot dropdown quot   - for Hover  web only  because mobile doesn t have feature HOVER   Works fine on Mobile as well     Code Example for Clickable data-toggle  quot dropdown quot    x000D   x000D         this CSS code just  for snippet preview purpose  Please omit when using  it         bs-example-navbar-collapse-1 ul li     float  left      bs-example-navbar-collapse-1 ul li ul li     float  none  important    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt    lt div id  bs-example-navbar-collapse-1  gt     lt ul class  nav navbar-nav  gt       lt li gt         lt a class    href    gt Home lt  a gt       lt  li gt       lt li class  dropdown  gt         lt a href     class  dropdown-toggle  data-toggle  dropdown  role  button  aria-haspopup  true  aria-expanded  false  gt                  subnav1              lt  a gt         lt ul class  dropdown-menu  gt           lt li gt  lt a href    gt Sub1 lt  a gt  lt  li gt           lt li gt  lt a href    gt Sub2 lt  a gt  lt  li gt           lt li gt  lt a href    gt Sub3 lt  a gt  lt  li gt           lt li gt  lt a href    gt Sub4 lt  a gt  lt  li gt           lt li gt  lt a href    gt Sub5 lt  a gt  lt  li gt           lt li gt  lt a href    gt Sub6 lt  a gt  lt  li gt         lt  ul gt         lt div class  clear  gt  lt  div gt       lt  li gt       lt li class  dropdown  gt         lt a href    class  dropdown-toggle  data-toggle  dropdown  role  button  aria-haspopup  true  aria-expanded  true  gt              subnav2              lt  a gt         lt ul class  dropdown-menu  gt           lt li gt  lt a href    gt Sub1 lt  a gt  lt  li gt           lt li gt  lt a href    gt Sub2 lt  a gt  lt  li gt           lt li gt  lt a href    gt Sub3 lt  a gt  lt  li gt           lt li gt  lt a href    gt Sub4 lt  a gt  lt  li gt           lt li gt  lt a href    gt Sub5 lt  a gt  lt  li gt           lt li gt  lt a href    gt Sub6 lt  a gt  lt  li gt         lt  ul gt         lt div class  clear  gt  lt  div gt       lt  li gt     lt  ul gt   lt  div gt    lt br gt   lt br gt   lt p gt  lt b gt Please Note  lt  b gt  added css code not related to Bootstrap navigation  It s just for snippet preview purpose  lt  p gt  x000D   x000D   x000D   Output

User · Answer

i know  its too  late but anyone who came here for help now you can see this  post  There are two options either use css  JavaScript and if you use css it will be applicable to devices greater that  769px width for clickable top menu  that will be work perfectly f  See here  for article

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

Examples related to javascript

Examples related to css

Examples related to twitter-bootstrap-3