Nested Sidebar Navigation in Simple theme

Solved
wilow3dev
Tourist
9 0 4

Hi,

I am using the simple theme, and am using nested sidebar navigation to show collections.

For example I have 3 tiers in the nest [Level 1, Level 2 and Level3] and each level is a link to a collection. 

the nested sidebar works currently by expanding to the next level ie L1 when clicked expands to L2, and L2 when clicked expands to L3. When L3 clicked it shows the L3 collection.

what I would like to achieve is that when I click on L1 or L2 [which both have a tier beneath it] it should show the collection, but also not lose the ability to expand levels on click.

I was thinking that the best approach is to have the click on the + on the level 1 and level 2 tier, to expands the menu, but the click on the text on the menu to show the collection linked with that tier. [Brooklyn theme sidemenu has this option when viewed i mobile view]

how can i modify the simple theme to achieve this please.

thank in advance

ThemuMitch
Explorer
45 11 11

This is an accepted solution.

Hi wilow3dev,

 

First, navigate to the Shopify online code editor. If you haven't done this before, check out this link:

https://shopify.dev/tutorials/develop-theme-getting-started-choosing-an-editor

 

Here, you want to modify 3 files:

  1. sidebar.liquid (found in the Sections folder)
  2. theme.scss.liquid (found in the Assets folder)
  3. theme.js.liquid (found in the Assets folder)

 

NOTE: Before editing your theme code, it's important to save a backup of your theme.

 

sidebar.liquid

Change lines 22–24 from this:

            <li class="site-nav--has-submenu site-nav__item">
              <button class="site-nav__link btn--link{% if has_active_link %} site-nav__collapse{% else %} site-nav__expand{% endif %}" aria-expanded="{{ has_active_link }}" aria-controls="Collapsible-{{ forloop.index }}">
                {{ link.title | escape }}

... to this:

            <li class="site-nav--has-submenu site-nav__item{% if link.active %} site-nav--active{% endif %}">
              <a href="{{ link.url }}" class="site-nav__link"{% if link.active %} aria-current="page"{% endif %}>{{ link.title | escape }}</a>
              <button class="site-nav__submenu-trigger btn--link{% if has_active_link %} site-nav__collapse{% else %} site-nav__expand{% endif %}" aria-expanded="{{ has_active_link }}" aria-controls="Collapsible-{{ forloop.index }}">

 

 ... and change lines 36–38 from this:

                    <li class="site-nav--has-submenu">
                      <button class="site-nav__link btn--link{% if has_active_childlink %} site-nav__collapse{% else %} site-nav__expand{% endif %}" aria-expanded="{{ has_active_childlink }}" aria-controls="Collapsible-{{ outer_index }}-{{ forloop.index }}">
                        {{ childlink.title | escape }}

... to this:

                    <li class="site-nav--has-submenu{% if childlink.active %} site-nav--active{% endif %}">
                      <a href="{{ childlink.url }}" class="site-nav__link"{% if childlink.active %} aria-current="page"{% endif %}>{{ childlink.title | escape }}</a>
                      <button class="site-nav__submenu-trigger btn--link{% if has_active_childlink %} site-nav__collapse{% else %} site-nav__expand{% endif %}" aria-expanded="{{ has_active_childlink }}" aria-controls="Collapsible-{{ outer_index }}-{{ forloop.index }}">

 

theme.scss.liquid

Add the following code to the bottom of the file:

.site-nav--has-submenu {
  & > .site-nav__link {
    display: inline-block;
    margin: 0;
    width: auto;

    @media only screen and (min-width: 750px) {
      width: calc(100% - 30px);
    }
  }

  & > .site-nav__collapse,
  & > .site-nav__expand {
    padding: 0 9px;

    & > span {
      position: static;
    }

    @media only screen and (min-width: 750px) {
      padding-right: 0;
      text-align: right;
      width: 24px;
    }
  }
}

.site-nav__submenu {
  width: 100%;
}

.site-nav--active a,
.site-nav__submenu .site-nav--active a {
  font-weight: 400;
}

.site-nav--active > a,
.site-nav__submenu .site-nav--active > a {
  font-weight: 700;
}

 

theme.js.liquid

Change line 1424 from this:

  submenuTrigger: '.site-nav__link',

... to this:

  submenuTrigger: '.site-nav__submenu-trigger',

 

... and change lines 1445–1447 from this:

          $(selectors.submenuParent)
            .has(selectors.expandedSubmenus)
            .hideSubmenu(0);

... to this:

          // $(selectors.submenuParent)
          //   .has(selectors.expandedSubmenus)
          //   .hideSubmenu(0);

 

Following these changes, the Simple theme will split any navigation links with submenus into a link and a +/- button. If you don't see the changes straight away, you may need to empty your browser cache and hard reload the page.

I hope these changes work for you.

Was your problem solved? Please mark this post as an Accepted Solution
0 Likes
wilow3dev
Tourist
9 0 4

Wonderful!!! 

Thank you so much! this worked first time with exactly the edits as suggested. 

I was expecting some challenges along the way but this worked first time. 

Thank you for this.