Multilevel submenu with bootstrap 3

Question

I am trying to make a multilevel menu using a Bootstrap theme on Drupal 8. I have created the menu and activated the "Show children" flag for all submenu containers but only first level submenus are showing.

I have tried http://knackforge.com/blog/pathirakaliappan/create-multi-level-bootstrap-menu-in-Drupal-8, but it doesn't seem to work: The submenus aren't being generated at all in the HTML.

I am using Drupal 8.1.2 and the 8.x-3.x-dev version of Drupal Bootstrap

Answer 1

You should conigure the max number of menu level in block structure

Answer 2

After setting menu levels from block configuration, if you want to open the submenu on hover use below CSS,

ul.nav li.dropdown:hover > ul.dropdown-menu {
  display: block;
}

Answer 3

 ul.nav ul.dropdown-menu li.menu-item--expanded:hover ul.dropdown-menu{
  display: block;
  position: absolute;
  left: 175px !important;
  top: -33px !important;
  background: #92996F;
  border: 1px solid white;
  width: 270px;

}

Answer 4

By default, the Bootstrap theme for Drupal 8 shows the first level items only, so you have to "tell" the theme that you need more levels. This is the procedure that usually works for me:

1. logged in as administrator, click Structure > Block Layout
2. locate the Block corresponding to your menu (e.g. "Main navigation" in the Navigation region) and click [Configure]
3. from the configuration page, set the "Number of levels to display" to the max number of levels you plan of displaying to users, including the initial level

After saving your changes you should see the inner levels of your menu.