The main menu in Bootstrap Theme is not a full menu:

- Sub menu items are not shown until you click on the main menu item.
- You can not click on a main menu item when a sub menu item of this main menu item is open or the main menu item is open.

How can I make the menu to work like a normal Drupal menu?

Comments

drupalfan2 created an issue. See original summary.

markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented
Status: Active » Closed (works as designed)

Sub menu items are not shown until you click on the main menu item.

That is normal Drupal behavior. You can click the "Show as expanded" checkbox for the menu item so it's always expanded.

You can not click on a main menu item when a sub menu item of this main menu item is open or the main menu item is open.

That is normal Bootstrap behavior. There are two options you can pursue here:

  1. Add an "all" menu item that links to the landing page for that menu item that isn't clickable.
  2. Implement your own menu solution that doesn't rely on on clicking elements (most likely a "hover" effect is what you're after, see #1893532: [bootstrap][policy][7.x-3.x] Navigation/Menus).
drupalfan2’s picture

drupalfan2 CreditAttribution: drupalfan2 commented

Thank you.
"Show as expanded" works, but problem 2 still exists.

On #1893532 there are a lot of solutions, but I want to find a solution without patching:

Is there any additional module like superfish or smartmenus.org (no Drupal 8 module available) or similar to completely solve this problem?

cfbauer’s picture

cfbauer CreditAttribution: cfbauer commented

Smartmenus has worked pretty much out of the box for me with Drupal 8 and Bootstrap. Just drop in the JS and add it in your libraries.yml file.

drupalfan2’s picture

drupalfan2 CreditAttribution: drupalfan2 commented

Thank you.
Is there a Drupal 8 module for smartmenus or how did you activate it?

cfbauer’s picture

cfbauer CreditAttribution: cfbauer commented

It's just javascript. Here are the instructions for including javascript in your theme: https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-an...

drupalfan2’s picture

drupalfan2 CreditAttribution: drupalfan2 commented

Finally I used bootstrap-hover-dropdown and modified the code for my needs. Works fine now and is fully customizable using jQuery.

mailfox’s picture

mailfox CreditAttribution: mailfox commented

my solution
.js

(function($) {
$('.menu--main .dropdown > a').click(function () {
if (window.innerWidth > 959) {
location.href = this.href;
}
});
})(jQuery);

.css

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

taggartj’s picture

taggartj CreditAttribution: taggartj commented

for anyone else ... look at the template files:

bootstrap themes (sub themes) uses the "themes/contrib/bootstrap/templates/menu/menu.html.twig" template
if you want you can grab a normal copy of
"core/modules/system/templates/menu.html.twig" and add that to your sub theme and then style it your self ... as bootstrap turns menus in to dropdown's which sometimes you don't want as they do not play nice with al; the menu level visibility stuff.

example lets say you have a nav structure like ...


- page 1 <- (menu level 1)
-- sub page 1 <- (menu level 2)
-- sub page 2
--- even further 3erd level <- (menu level 3)

only page 1 <- (menu level 1) will show and the rest will be dropdown content.
and that is confusing because when your on (menu level 2 or 3) you only see (menu level 1)

so really just copy "core/modules/system/templates/menu.html.twig" or "core/themes/classy/templates/navigation/menu.html.twig"

to themes/contrib/YOURSUBTHEME/templates/menu/menu.html.twig"
or "themes/contrib/YOURSUBTHEME/templates/menu/yourmenu-name-menu.html.twig"