Debut theme - added a second navigation menu, but its dropdowns don't work?

Store Design
1

Hi all,

I’ve modified our Debut theme so that on medium browser sizes, the default main navigation bar disappears and a duplicate of it appears in a row beneath instead.

I’ve done this by modifying the code thus:-

On the default navbar, I’ve added the class threedt-first-row-nav to the parent nav element:-

{% if section.settings.align_logo == 'left' %}
        
      {% endif %}

I’ve inserted a second navbar block thus - just above the line


I've added

```markup

      {% if section.settings.align_logo == 'left' %}
        
      {% endif %}

And in my theme.css.liquid I’ve added:

@media only screen and (max-width: 1152px) and (min-width:750px) {
  .threedt-second-row-nav {
    display: table-cell !important;
    width: 100%;
  }
  .threedt-first-row-nav {
    display: none !important;
  }    
}

@media only screen and (min-width: 1153px) {
  .threedt-second-row-nav {
    display: none !important;
  }
}

This works as far as displaying the “second row” navigation menu and hiding the “first row” navigation menu. However, clicking on the menu items of the “second row” navigation menu does not show the submenus - nothing happens as far as I can tell. Javascript handlers get called, but I can’t tell what is different that means this second set don’t work.

Does anyone know what the issue could be here, how to fix it – or know an alternative approach that will work properly?

Any help much appreciated – only discovered this problem days before launch, so panicking a bit about getting it ready on time :slightly_smiling_face:

Thanks,

2

As is often the case, by writing out the above and looking at it again I think I may have found the solution to my own issue – does anyone know if this has any undesirable side-effects?

I’ve modified theme.js and changed line 2893 from:

cache = {
      nav: navigation,
      topLevel: document.querySelectorAll(selectors.siteNavLinkMain),
      parents: navigation.querySelectorAll(selectors.siteNavHasDropdown),
      subMenuLinks: document.querySelectorAll(selectors.siteNavChildLinks),
      activeDropdown: document.querySelector(selectors.siteNavActiveDropdown),
      siteHeader: document.querySelector(selectors.siteHeader),
      siteNavChildLink: document.querySelectorAll(selectors.siteNavChildLink)
    };

to

cache = {
      nav: navigation,
      topLevel: document.querySelectorAll(selectors.siteNavLinkMain),
      parents: document.querySelectorAll(selectors.siteNavHasDropdown),	// was navigation -- 3dt 
      subMenuLinks: document.querySelectorAll(selectors.siteNavChildLinks),
      activeDropdown: document.querySelector(selectors.siteNavActiveDropdown),
      siteHeader: document.querySelector(selectors.siteHeader),
      siteNavChildLink: document.querySelectorAll(selectors.siteNavChildLink)
    };