Main Menu shows only the first 2 levels

Yep - second that problem.

The menu item definitely isn;t rendering in the DOM, and if we switch to the bootstrap parent theme the same problem happens. If we switch to a different theme the menu works.

We haven't been able to find the source of the problem yet. Anyone else spotted this issue?

We ended up finding this thread - https://drupal.org/comment/7169716#comment-7169716

Dropping those theme functions into our template.php worked. It would be nice to see more menu control in the theme tbh - I would prefer to just turn on the bootstrap menu systems when needed.

Would be nice to see this solution integrated into the theme...

http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

Scripted response: This issue has been closed while cleaning up the issue queue.

+1

Nice solution in child theme template.php: http://www.drupalgeeks.com/drupal-blog/how-render-bootstrap-sub-menus

#6 did the trick. This did exactly what I was looking for.
Thanks ipwa.

Solution #6 works like a charm!

Sorry for adding comments to a closed thread, but this is the most focused thread i've found about this problem.

The solution in #6 works, but it doesn't work properly on mobile. If you shrink your browser window to force the mobile version to show up, then the behavior of the menu items is different: the first level menu items are drop-down menus, but the second level menu items with children items are hover-down menu items. Any ideas to make those second level menu items dropdown menus too and get a consistent behavior for all the menu items in the mobile version?.

No.

That's why Bootstrap took support for sub-menus out of the framework: it doesn't work well with mobile.

It's also why #1893532: [bootstrap][policy][7.x-3.x] Navigation/Menus has been sitting there forever. You'll some more solutions in that issue, but suffice it to say: if you have to "drill down" a site's nav... you're doing it wrong.

Thanks a lot for your answer, markcarver, I'm a Bootstrap newbie and didn't know about that.

#6 Solution, Worked Great!!Thanks a lot!!!

#6 doesn't work for me.
Drupal 8.3.6
URL: www.webameriqa.com

Here is the list of the main menu where submenu level 3 is not showing

• North
  • Canada
  • Mexico
  • USA
    • Slavery
    • Civil War
    • Reconstruction
    • Jim Crow
    • Civil Rights Mouvement
• Central
• South
• Caribbean

on my side overwrite main--menu.html.twig in drupal 8
level 1 & level 2 & level 3

{#
/**
 * @file
 * Default theme implementation to display a menu.
 *
 * Available variables:
 * - menu_name: The machine name of the menu.
 * - items: A nested list of menu items. Each menu item contains:
 *   - attributes: HTML attributes for the menu item.
 *   - below: The menu item child items.
 *   - title: The menu link title.
 *   - url: The menu link url, instance of \Drupal\Core\Url
 *   - localized_options: Menu link localized options.
 *   - is_expanded: TRUE if the link has visible children within the current
 *     menu tree.
 *   - is_collapsed: TRUE if the link has children within the current menu tree
 *     that are not currently visible.
 *   - in_active_trail: TRUE if the link is in the active trail.
 *
 * @ingroup themeable
 */
#}
{% import _self as menus %}

{#
  We call a macro which calls itself to render the full tree.
  @see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ menus.menu_links(items, attributes, 0) }}

{% macro menu_links(items, attributes, menu_level) %}
    {% import _self as menus %}
    {% if items %}
        {% if menu_level == 0 %}
            <ul{{ attributes.addClass('list-inline visitmenu') }}>
            {% elseif menu_level == 1  %}
                <ul{{ attributes.addClass('list-inline submenu dropdown-menu') }} aria-labelledby="dropdownMenu1">
                {% else %}
                    <ul{{ attributes.addClass('list-inline submenu dropdown-menu third-level') }} aria-labelledby="dropdownMenu1">
                    {% endif %}
                    {% for item in items %}
                        {%
                set item_classes = [
                  item.is_expanded? 'dropdown',
                  item.is_expanded and menu_level == 0 ? 'dropdown-toggle dd-menu',
                  item.in_active_trail ? 'active',
                ]
                        %}
                        {# data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" #}
                        {% if menu_level == 0 and item.is_expanded %}
                            <li{{ item.attributes.addClass(item_classes) }} id="dropdownMenu1" >
                                <a href="{{ item.url }}" class="active">{{ item.title }}</a>
                            </li>
                        {% else %}
                            <li{{ item.attributes.addClass(item_classes) }}>
                                {{ link(item.title, item.url) }}
                            </li>
                        {% endif %}

                        {% if item.below %}
                            {{ menus.menu_links(item.below, attributes.removeClass('nav', 'navbar-nav'), menu_level + 1) }}
                        {% endif %}

                    {% endfor %}
                </ul>
            {% endif %}
        {% endmacro %}

for #14, I'm seeing the sub-UL elements outside of the top level LI items rather than nested inside them.

Seeing:
< ul>
< li>< /li>
< ul>< li>< /li>< /ul>
< /ul>

What about Drupal 7?

Solution #6 works for me in D7 in boostrap version = "7.x-3.26",
Thanks

#6 D7 doesn't work properly on mobile

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:

logged in as administrator, click Structure > Block Layout
locate the Block corresponding to your menu (e.g. "Main navigation" in the Navigation region) and click [Configure]
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.

then in css :

 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;
}

Where (in which dir/file) should I change the default Bootstrap Barrio Drupal sub-theme styling (CSS) for my Menu UI? The last person to comment did not say where to add his custom CSS. Also, I changed the Navigation Block config to display 3 levels, so I now see the caret denoting another expandable menu level, but when I select that control menuitem, nothing happens -- the 3rd level dropdown menu still does not render/is not expanding. I hope someone has a fix.