Varbase incompatibility: Children of a menu item do not appear in the offcanvas mobile menu

In your Parent-View-mmenu.png screenshot, what is the downwards facing arrow next to services? Can you paste the HTML for that part of the menu tree in a comment here?

Thank you for the HTML. How are the SVG icons getting in there on the mobile menu? Are you modifying the twig templates?

Can you screenshot the menu item form page for the Services menu item?

I've now been able to replicate your issue. It looks like using <nolink> as the value for the field labelled Link when adding a menu link item through the UI results in a broken mmenu. This is confirmed by looking at the page source before JavaScript is applied:

<ul class="clearfix nav navbar-nav">
  <li class="menu-item--_05e9416-aac7-4076-b477-78bc4d786ec1 nav-item">
    <a href="/" class="nav-link" data-drupal-link-system-path="&lt;front&gt;">Home</a>
  </li>
  <li class="menu-item--_78d1d01-9ff2-4e3a-8692-9b1d240d93c9 nav-item menu-item--expanded dropdown">
    <span class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">About Varbase</span>
    <ul class="dropdown-menu">
      <li class="menu-item--_21bc099-1b96-471b-9ee3-c9ab3ae378f6 dropdown-item">
        <a href="http://google.com">A sub item</a>
      </li>
    </ul>
  </li>
  <li class="menu-item--b446aefb-7b73-40af-9f03-5e466dacc4f9 nav-item">
    <a href="/form/contact" class="nav-link" data-drupal-link-system-path="webform/contact">Contact Us</a>
  </li>
</ul>

Compared with the HTML produced by mmenu when it parses the above:

<ul class="clearfix navbar-nav mm-listview">
  <li class="menu-item--_05e9416-aac7-4076-b477-78bc4d786ec1 mm-listitem">
    <a href="/" class="mm-listitem__text is-active" data-drupal-link-system-path="<front>">Home</a>
  </li>
  <li class="menu-item--_78d1d01-9ff2-4e3a-8692-9b1d240d93c9 menu-item--expanded dropdown mm-listitem">
    <a class="mm-btn mm-btn_next mm-listitem__btn mm-listitem__text" href="#mm-2">About Varbase<span class="mm-sronly">Open submenu</span></a>
  </li>
  <li class="menu-item--b446aefb-7b73-40af-9f03-5e466dacc4f9 mm-listitem">
    <a href="/form/contact" class="mm-listitem__text" data-drupal-link-system-path="webform/contact">Contact Us</a>
  </li>
</ul>

The next step is to determine whether the incompatibility is due to varbase/bootstrap templates or whether it exists on a default Drupal install.

In fact the problem is worse, adding any menu item with children results in a broken mmenu. I'm pretty sure the templates the bootstrap barrio theme are applying are causing the issue.

The problematic template being used for the main menu is themes/contrib/vartheme_bs4/templates/menu/menu--main.html.twig. This is applying to all versions of the main menu including the off-canvas one.

The problem is that there are no template suggestions or templates added for the off-canvas menu. In some ways it would be sensible for this module to provide a stock template for the off canvas menu based on Drupal's stable template with a higher specificity so that vartheme_bs4 doesn't take over and break things. This could then be overridden by the developer in their theme should they need to.

I will look at doing this tomorrow. Thanks for the bug report!

Here is an initial patch to test. I'd like to write some tests to confirm that this fixes the problem before committing but it would be good to get your feedback on whether it works for you first.

Apologies, previous patch was empty... this one should work

No problem, take your time. I hope you feel better soon!

I had the same issue with a different theme due to the `main-menu.twig.html` included in the base theme. After applying the patch #12 I can see the 3rd level menu items rendering in the off canvas menu. I'm using version 4.3.1

@aanjaneyam I hate to do this to you but the fontawesome problem you're having should really be a separate issue so that we can keep this one related to the varbase/bootstrap theme incompatibility. Can you open a new issue and detail the reproduction steps, including what module/method you're using to inject the fontawesome icons?

I'm marking this issue as RTBC as the patch has been confirmed to work by yourself and others.

Yes please, can you create a new issue? The reason is this one is focused on fixing a particular issue (the children not appearing in off canvas menu) and it is resolved so we can commit the fix and close this issue. It is always better to have focused issues on one particular problem at a time.

This was committed to the 4.4.x branch but for some reason the commit isn't showing up here.