3rd level of primary menu doesn't get displayed

[alex-hsa]

We changed the max_depth variable to 3 in the template.php file and the HTML code for the 3rd level menu items is generated appropriately. However, we are unable to figure out what Javascript/CSS code triggers displaying the 3rd-level menu items. Can you help?

If there is any documentation that describes how to fix this please point us in the right direction.

Thank you very much,
Alex

[soniktrooth]

Hi @alex-hsa

I don't believe Kalatheme's CSS supports more than 2 levels but it shouldn't be too hard to add in your custom theme if you want to. From what you described, it sounds like the nested markup is being printed, so you might want to look at the following examples to get an idea of how to do it:

• https://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3
• https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h
• https://codepen.io/ajaypatelaj/pen/prHjD

[alex-hsa]

Thank you @soniktrooth for your kind reply, which was very helpful.

I figured out that the menu is part of the Bootstrap theme and found various help on the web.

The solution I settled with had the following changes:

1. Changed line Subtheme generation requires kalatheme to be default theme #215 of 'docroot/sites/all/themes/contrib/kalatheme/template.php'
   $main_menu_tree = menu_tree_all_data('main-menu', NULL, 3);
   (Replaced the number 2 with 3, so Drupal retrieves 3 levels for the main menu.)

2. Added following styles to the main.css file

ul.nav .open > .dropdown-menu .dropdown > .dropdown-menu {
  position: absolute;
  top: 0px;
  left: 250px;
  display: none;
}
#header.navbar #navbar .dropdown.open .dropdown-menu {
  overflow-y: inherit !important;
}
ul.nav .open > .dropdown-menu li.dropdown:hover > ul.dropdown-menu {
  display: block;
  right: 0;
}