Allow click on twitter bootstrap dropdown toggle link

Question

We have setup the twitter bootstrap dropdown to work on hover  as opposed to click  yes we are aware of the no hover on touch devices    But we want to be able to have the main link work when we click it   By default twitter bootstrap blocks it  so how can we re-enable it

User · Answer

I m not sure about the issue for making the top level anchor element a clickable anchor but here s the simplest solution for making desktop views have the hover effect  and mobile views maintaining their click-ability      Medium screens and up only  media only screen and  min-width   screen-md-min           Enable menu hover for bootstrap        dropdown menus      dropdown hover  dropdown-menu           display  block            This way the mobile menu still behaves as it should  while the desktop menu will expand on hover instead of on a click

User · Answer

Since there is not really an answer that works  selected answer disables dropdown   or overrides using javascript  here goes    This is all html and css fix  uses two  lt a gt  tags     lt ul class  nav  gt    lt li class  dropdown dropdown-li  gt       lt a class  dropdown-link  href  http   google com  gt Dropdown lt  a gt       lt a class  dropdown-caret dropdown-toggle  gt  lt b class  caret  gt  lt  b gt  lt  a gt       lt ul class  dropdown-menu  gt           lt li gt  lt a href     gt Link 1 lt  a gt  lt  li gt           lt li gt  lt a href     gt Link 2 lt  a gt  lt  li gt       lt  ul gt    lt  li gt   lt  ul gt    Now here s the CSS you need    dropdown-li       display inline-block  important     dropdown-link       display inline-block  important       padding-right 4px  important     dropdown-caret       display inline-block  important       padding-left 4px  important      Assuming you will want the both  lt a gt  tags to highlight on hover of either one  you will also need to override bootstrap  you might play around with the following     nav  gt  li hover       background-color   f67a47    hover background color      nav  gt  li hover  gt  a       color  white    hover text color      nav  gt  li hover  gt  ul  gt  a       color  black    dropdown item text color

User · Answer

This can be done simpler by adding two links  one with text and href and one with the dropdown and caret    lt a href    route  posts index      gt Posts lt  a gt   lt a href    route  posts index      class  dropdown-toggle  data-toggle  dropdown  role  link  aria-haspopup  true  aria- expanded  false  gt  lt  a gt   lt ul class  dropdown-menu navbar-inverse bg-inverse  gt       lt li gt  lt a href    route  posts create      gt Create lt  a gt  lt  li gt   lt  ul gt    Now you click the caret for dropdown and the link as a link  No css or js needed  I use Bootstrap 4 4 0 0-alpha 6  defining the caret is not necessary  it appears without the html

User · Answer

Just add disabled as a class on your anchor    lt a class  dropdown-toggle disabled  href  http   google com  gt      Dropdown  lt b class  caret  gt  lt  b gt  lt  a gt    So all together something like    lt ul class  nav  gt       lt li class  dropdown  gt           lt a class  dropdown-toggle disabled  href  http   google com  gt              Dropdown  lt b class  caret  gt  lt  b gt           lt  a gt           lt ul class  dropdown-menu  gt               lt li gt  lt a href     gt Link 1 lt  a gt  lt  li gt               lt li gt  lt a href     gt Link 2 lt  a gt  lt  li gt           lt  ul gt       lt  li gt   lt  ul gt

User · Answer

An alternative solution is just to remove the  dropdown-toggle  class from the anchor  After this clicking will no longer trigger the dropwon js  so you may want to have the submenu to show on hover

User · Answer

You could use a javascript snippit    function            Enable drop menu clicks         nav li  gt  a   off          That will unbind the click event preventing url changing

User · Answer

Here s a little hack that switched from data-hover to data-toggle depending the screen width          Bootstrap nav menu hack       window  on  load   function             On page load     if    window  width    lt  768                navbar-nav  gt  li  gt   dropdown-toggle   removeAttr  data-hover   attr  data-toggle    dropdown                  On window resize       window  resize function              if    window  width    lt  768                    navbar-nav  gt  li  gt   dropdown-toggle   removeAttr  data-hover   attr  data-toggle    dropdown              else                   navbar-nav  gt  li  gt   dropdown-toggle   removeAttr  data-toggle   attr  data-hover    dropdown

User · Answer

For those of you complaining about  the submenus don t drop down   I solved it this way  which looks clean to me   1  Besides your   lt a class  dropdown-toggle disabled  href  http   google com  gt       Dropdown  lt b class  caret  gt  lt  b gt   lt  a gt    put a new   lt a class  dropdown-toggle  gt  lt b class  caret  gt  lt  b gt  lt  a gt    and remove the  lt b class  caret  gt  lt  b gt  tag  so it will look like   lt a class  dropdown-toggle disabled  href  http   google com  gt  Dropdown lt  a gt  lt a class  dropdown-toggle  gt  lt b class  caret  gt  lt  b gt  lt  a gt    2  Style them with the following css rules    caret1       position  absolute  important  top  0  right  0      dropdown-toggle disabled       padding-right  40px      The style in  caret1 class is for positioning it absolutely inside your li  at the right corner   The second style is for adding some padding to the right of the dropdown to place the caret  preventing overlapping the text of the menu item   Now you have a nice responsive menu item which looks nice both in desktop and mobile versions and that is both clickable and dropdownable depending on whether you click on the text or on the caret

[drop-down-menu] Allow click on twitter bootstrap dropdown toggle link?

Examples related to drop-down-menu

Examples related to hyperlink

Examples related to twitter-bootstrap