Mobile nav toggle-expanded menus not working

[rootwork]

The drop-down menus on the desktop version seem to be working fine, but on the mobile version (read: at a smaller browser width) I'm getting all of the menu items with children grouped at the top with their arrows, and then all of the children of all those parent items grouped together below them. Clicking the arrows next to the parent flips the arrow, but doesn't show or hide any menu items.

An important caveat is that I'm not using this within WordPress, just with a generic menu. I'm guessing that the script is expecting some sort of markup somewhere that it's not seeing -- and so consequently isn't correctly adjusting the groupings at mobile widths. (At first I thought since it was working in the desktop version, the lack of WP-specific markup wasn't going to be an issue.)

Is there anything you can share about what WP-specific markup or classes it might be looking for? I can certainly adjust my menu, but looking through the script I can't see anything that stands out as something it's expecting.

Thanks!

[themefoundation]

Do you have this same problem with the demo? While mo.js was designed for WordPress, it doesn't require it. In fact, the index.html file of this Github repository has a demo that doesn't require WordPress. If you're having this problem even with the demo, please let me know! If you're only having trouble with your code, feel free to post your code to Github as well and I'll try to take a look and see if I can figure out what the problem is.

[rootwork]

I don't have that issue on the demo. (I'm experiencing it in multiple browsers, so I don't think it's a browser issue.)

I've simplified my code down to the following. I thought it could be because I was including the scripts in the footer, but moving them to the header didn't change anything. And again, it's creating the dropdowns at desktop widths, so the script is definitely firing.

  <nav id="block-dove-main-menu" class="contextual-region block block--system block--main-navigation" role="navigation">

    <h2 class="visually-hidden block--main-navigation__title">Main navigation</h2>

    <div class="block--main-navigation__menu">

      <ul class="menu">
        <li class="menu-item" id="menu-item__1">
          <a href="#">Home</a>
        </li>
        <li class="menu-item menu-item--expanded" id="menu-item__2">
          <a href="#">Parent item one</a>
          <ul class="menu">
            <li class="menu-item menu-item--expanded" id="menu-item__3">
              <a href="#">Child item one</a>
              <ul class="menu">
                <li class="menu-item" id="menu-item__4">
                  <a href="#">Grandchild item one</a>
                </li>
                <li class="menu-item" id="menu-item__5">
                  <a href="#">Grandchild item two</a>
                </li>
                <li class="menu-item" id="menu-item__6">
                  <a href="#">Grandchild item three</a>
                </li>
              </ul>

            </li>
            <li class="menu-item menu-item--expanded" id="menu-item__7">
              <a href="#">Child item two</a>
              <ul class="menu">
                <li class="menu-item" id="menu-item__8">
                  <a href="#">Grandchild item one</a>
                </li>
                <li class="menu-item" id="menu-item__9">
                  <a href="#">Grandchild item two</a>
                </li>
                <li class="menu-item" id="menu-item__10">
                  <a href="#">Grandchild item three</a>
                </li>
              </ul>

            </li>
          </ul>

          </li>
        <li class="menu-item" id="menu-item__11">
          <a href="#">Menu item</a>
        </li>
        <li class="menu-item" id="menu-item__12">
          <a href="#">Menu item</a>
        </li>
        <li class="menu-item" id="menu-item__13">
          <a href="#">Menu item</a>
        </li>
      </ul>
    </div>
  </nav>

Here's what I have going on my main.js (equivalent to demo.js):

      $('.menu').thmfdnMenu({
        toggleButtonID: 'mojs-button',
        mobileMenuLocation: '.block--main-navigation__menu'
      });

And here's what get's generated at desktop and mobile widths (static images obviously, but you should be able to see what's going on):

Thanks for taking a look at this!

[themefoundation]

Without having access to all the code that's running, it's hard to say exactly what the issue is. I commented out the following line in your main.js file:

mobileMenuLocation: '.block--main-navigation__menu'

This took care of the issue you mentioned, but for some reason grandchild menu items were no longer accessible. So it looks like there might be something else involved, but I'm not sure what.

[rootwork]

Well like I said, I simplified everything down to JUST that code. I pulled it out of the CMS and stuck it on a page by itself -- that's the only thing running.

I only included mobileMenuLocation because it was in the demo, so I thought it was necessary. But for me, removing that doesn't solve the problem -- I still get arrows that don't hide or reveal anything in the parent items, and child items grouped together below them. But if the grandchild menu items aren't appearing for you either, then it sounds like it's not a solution anyway.

Is there any more information I can provide here? I'm just not sure what is different about it from the demo, other than the markup -- that's why I thought perhaps the mobile version was expecting some specific markup (order of ULs, LIs, As; particular classes, etc.). Did you code anything into the mobile version that looks for particular things?

[themefoundation]

It looks like you're using the same class name for your parent menu as you are for the child menus. I believe this is causing a problem when you set up mo.js like this:

      $('.menu').thmfdnMenu({
        toggleButtonID: 'mojs-button',
        mobileMenuLocation: '.block--main-navigation__menu'
      });

As you can see, that will apply the mo.js code to any element with a class of "menu" and since you're using this class on both parent and child menus, it's treating both of them as separate parent menus. Try changing the class name of the child menus to "sub-menu" like it is in the demo (although I think any class name will work, as long as it's not the same as the parent class). Let me know if you have any more trouble with it.

[rootwork]

You were totally right. Sorry for not realizing something so basic.