Adding a second dropdown navigation menu on Debut

Solved
Highlighted
Shopify Partner
3 1 0

I'm using debut theme. I'm trying to insert a second separate dropdown navigation with a separate linklist on a collection page. I duplicated the site-nav.liquid and named it site-nav-embed.liquid.

I inserted it on the collection page with ( {% include 'site-nav-embed', linklist: section.settings.main_linklist, wrapper_class: 'site-nav--centered' %})

I modified line 12 in site-nav-embed.liquid  to include my new linklist ({% for link in linklists.swatches.links %}).

The new menu appears and everything shows up and is nested however when you click on the new navigation dropdown buttons they do not expand the dropdown. site-nav--active-dropdown and aria-expanded="true" is not applied to this menu.

Some help with this would be greatly appreciated!

 

 

0 Likes
Highlighted
Shopify Partner
3 1 0

This is an accepted solution.

I figured out the issue I added a second ID to theme.js: navigation: '#AccessibleNav, #AccessibleNav2',

I then wrapped the new navigation with the new ID  <nav id="AccessibleNav2" role="navigation">
{% include 'site-nav-embed', linklist: section.settings.main_linklist, wrapper_class: 'site-nav--centered' %}
</nav> 

0 Likes