2

This is the first drupal project i'm working on and i'm having the following problem. I have my dropdown menu set up as followed:

Dropdown menu with bootstrap

The problem is that the parent link "Materialen" is not clickable while the children are. What should i change to be able to click the parent link?

Improve this question
3
  • Why do you want make that as clickable? Do you want to give link to that parent-menu? Which module are you using for dropdown? – Krishna Mohan Jul 17 '14 at 12:51
  • Yes i want to give a link to it. I just installed the drupal theme and added the taxonomy menu module. I want to make it clickable so the parent-menu can give an overall description. – majorbelow Jul 17 '14 at 13:03
  • 1
    Bootstrap decided it was better to have it behave like this for mobile/touch device users. Rollovers do not exist in mobile/touch devices so this was the solution. and since the majority of the web is going mobile, they were just future proofing. Duplicate the parent item underneath the drop-down with default bootstrap settings, or remove the functionality with the suggested answers but I don't recommend it. – DMAC Jul 16 '15 at 19:36
5

A nice way that work with Drupal 8 would be to override in your subtheme:

menu--main.html.twig

And remove

 data-toggle="dropdown"

Cheers

Improve this answer
2
  • There is no data-toggle="dropdown" in menu--main.html.twig in D8. – komlenic Jun 16 '20 at 18:37
  • Adding to the above comment: This is a little confusing because the normal template override filename of menu--main.html.twig already exists in the bootstrap base theme and has other code in it. – komlenic Jun 16 '20 at 18:45
2

Just remove or comment out from your theme .info file this line:

scripts[] = 'bootstrap/js/dropdown.js'

It will automatically make navbar dropdown enabled.

Improve this answer
1

Sorry if I'm late but I just discovered after mountains of readings if you take out line 33 

 $element['#localized_options']['attributes']['data-toggle'] = 'dropdown';

of the menu-link.func.php should work

:)

Improve this answer
1
  • 4
    You should not hack contributed code, instead create a subtheme and override the functions you need. For example, when the you update the theme you'll lost your changes. – sanzante Sep 18 '14 at 10:26
0

If you are using the Bootstrap theme (or a subtheme of it), you should be able to accomplish this with just some additional CSS.

This Bootply https://www.bootply.com/LcSwSskuR1 provides a nice solution, basically you need to add a :hover to the menu. I believe this works with the Drupal Bootstrap theme: 

@media screen and (min-width:768px) {
  .navbar-nav .dropdown:hover>.dropdown-menu {
    display:block;margin:0
  }
}

You may need to fiddle with the exact @media query you need for your site.

Improve this answer
0

Overide the menu.html.twig and Remove that line {% set link_attributes = link_attributes.addClass('dropdown-toggle').setAttribute('data-toggle', 'dropdown') %}

with {% set link_attributes = link_attributes.addClass('dropdown-toggle').removeAttribute('data-toggle', 'dropdown') %}

i.e setAttribute('data-toggle', 'dropdown') to removeAttribute('data-toggle', 'dropdown')

Improve this answer
-1

Just add "disabled" as a class with dropdown-toggle class on Anchor tag

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.