SHopify Debut Theme Sidebar Dropdown Menu not Working

Solved
sbiar
Tourist
5 1 6

Hi,

I have a development site where weve done some good things, but I am stuck as to why the sidebar menu we created does not work. We are using the Shopify Debut theme & the documented "site-nav" snippet just as is done for the top navigation menu ... which works!

You can see the pages here where there is a side menu that does not expand when clicked on & the top menu which does.

https://bsaverau.myshopify.com/pages/install-guide
https://bsaverau.myshopify.com/pages/faq

The pwd to access the store is 18260Wickham 

The code to get the top menu in header.liquid is ... 

<nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation">
{% include 'site-nav', linklist: section.settings.main_linklist %}
</nav>

... and the code Ive used for the side-menu is ...

<nav class="list-group help-nav" id="AccessibleNav1" role="navigation">
<span class="sidebar-heading">Installation</span>
{% include 'site-nav', linklist: 'sidebar-installation', wrapper_class: 'sidebar text-left' %}
<span class="sidebar-heading">Other</span>
{% include 'site-nav', linklist: 'sidebar-other', wrapper_class: 'sidebar text-left' %}
</nav>

 

... and FYI .. Ive tried removing the wrapper_class and that makes no difference.

And help woiuld be greatly appreciated! 

Finally .. Ive checked the theme.js code and there is no errorneous comment code as per this post ... https://community.shopify.com/c/Technical-Q-A/Debut-Drop-down-Menu-not-working/td-p/1006905

Accepted Solution (1)

Accepted Solutions
sbiar
Tourist
5 1 6

This is an accepted solution.

I created a solution which i thought i would post in case it helps someone else.

It is a side menu that works on the Debut Theme from Shopify and provides an expandable & collapsible multi level menu which highlights active items and expands sub-menus with active links. You can have multiple sub-menus and up to three levels.

1. Create a snippet called sidenav

{% comment %}
Renders a list of menu items as vertical collapsable dropdown list
Accepts:
- linklist: {Object} Linklist Liquid object (required)

Usage:
{% include 'side-nav', linklist: section.settings.main_linklist %}
{% endcomment %}
<ul class="sidenav">
{% for link in linklists[linklist].links %}
{% if link.links != blank %}
<button class="site-nav__link--button dropdown-btn{% if link.active %} active-link {% else %}{% for child_link in link.links %}{% if child_link.active %}active-link{% endif %} {% endfor %} {% endif %}">{{ link.title }}
<i class="fa fa-caret-down"></i>
</button>
<ul class="child dropdown-container{% if link.active %} active-link {% else %}{% for child_link in link.links %}{% if child_link.active %}active-link{% endif %} {% endfor %}{% endif %}">
{% for child_link in link.links %}
{% if child_link.links != blank %}
<button class="site-nav__link--button dropdown-btn{% if child_link.active %} active-link {% else %}{% for grandchild_link in child_link.links %}{% if grandchild_link.active %}active-link{% endif %} {% endfor %}{% endif %}">{{ child_link.title }}
<i class="fa fa-caret-down"></i>
</button>
<ul class="grandchild dropdown-container{% if child_link.active %} active-link {% else %}{% for grandchild_link in child_link.links %}{% if grandchild_link.active %}active-link{% endif %}{% endfor %}{% endif %}">
{% for grandchild_link in child_link.links %}
<li {% if grandchild_link.active %}class="active {% if grandchild_link.child_active %}child-active{% endif %}"{% endif %}><a href= "{{ grandchild_link.url }}">{{ grandchild_link.title }}</a></li>
{% endfor %}
</ul>
{% else %}
<li {% if child_link.active %}class="active {% if child_link.child_active %}child-active{% endif %}"{% endif %}><a href= "{{ child_link.url }}">{{ child_link.title }}</a></li>
{% endif %}
{% endfor %}
</ul>
{% else %}
<li {% if link.active %}class="active {% if link.child_active %}child-active{% endif %}"{% endif %}><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endif %}
{% endfor %}
</ul>

2. In your new page template for pages to use the side menu add the following script.

<script>
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
</script>

3. Add CSS to theme.css or your own css file used in the template ...

.active-link {display:block!important;}
/* Fixed sidenav, full height */
.sidenav {height: 100%;z-index: 1;top: 0;left: 0;overflow-x: hidden;}
/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {cursor: pointer;white-space: nowrap;display: block;}
.sidenav .active a {text-decoration: underline;}
/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover, .sidenav .active, .sidenav .active-link .active, .sidenav button.active-link {text-decoration: underline;}
.sidenav li {padding: 3px 10px;}
.sidenav .child {padding-left: 10px;}
.dropdown-container {display: none;}

4. And finally, in your page template where you want the menu to appear ... add the following replacing the "sidebar-menu-handle" with the handle of your menu.

{% include 'side-nav', linklist: 'sidebar-menu-handle' %}

There will no doubt be more styling, but this worked for me.

 

View solution in original post

Replies 4 (4)
sbiar
Tourist
5 1 6

This is an accepted solution.

I created a solution which i thought i would post in case it helps someone else.

It is a side menu that works on the Debut Theme from Shopify and provides an expandable & collapsible multi level menu which highlights active items and expands sub-menus with active links. You can have multiple sub-menus and up to three levels.

1. Create a snippet called sidenav

{% comment %}
Renders a list of menu items as vertical collapsable dropdown list
Accepts:
- linklist: {Object} Linklist Liquid object (required)

Usage:
{% include 'side-nav', linklist: section.settings.main_linklist %}
{% endcomment %}
<ul class="sidenav">
{% for link in linklists[linklist].links %}
{% if link.links != blank %}
<button class="site-nav__link--button dropdown-btn{% if link.active %} active-link {% else %}{% for child_link in link.links %}{% if child_link.active %}active-link{% endif %} {% endfor %} {% endif %}">{{ link.title }}
<i class="fa fa-caret-down"></i>
</button>
<ul class="child dropdown-container{% if link.active %} active-link {% else %}{% for child_link in link.links %}{% if child_link.active %}active-link{% endif %} {% endfor %}{% endif %}">
{% for child_link in link.links %}
{% if child_link.links != blank %}
<button class="site-nav__link--button dropdown-btn{% if child_link.active %} active-link {% else %}{% for grandchild_link in child_link.links %}{% if grandchild_link.active %}active-link{% endif %} {% endfor %}{% endif %}">{{ child_link.title }}
<i class="fa fa-caret-down"></i>
</button>
<ul class="grandchild dropdown-container{% if child_link.active %} active-link {% else %}{% for grandchild_link in child_link.links %}{% if grandchild_link.active %}active-link{% endif %}{% endfor %}{% endif %}">
{% for grandchild_link in child_link.links %}
<li {% if grandchild_link.active %}class="active {% if grandchild_link.child_active %}child-active{% endif %}"{% endif %}><a href= "{{ grandchild_link.url }}">{{ grandchild_link.title }}</a></li>
{% endfor %}
</ul>
{% else %}
<li {% if child_link.active %}class="active {% if child_link.child_active %}child-active{% endif %}"{% endif %}><a href= "{{ child_link.url }}">{{ child_link.title }}</a></li>
{% endif %}
{% endfor %}
</ul>
{% else %}
<li {% if link.active %}class="active {% if link.child_active %}child-active{% endif %}"{% endif %}><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endif %}
{% endfor %}
</ul>

2. In your new page template for pages to use the side menu add the following script.

<script>
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
</script>

3. Add CSS to theme.css or your own css file used in the template ...

.active-link {display:block!important;}
/* Fixed sidenav, full height */
.sidenav {height: 100%;z-index: 1;top: 0;left: 0;overflow-x: hidden;}
/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {cursor: pointer;white-space: nowrap;display: block;}
.sidenav .active a {text-decoration: underline;}
/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover, .sidenav .active, .sidenav .active-link .active, .sidenav button.active-link {text-decoration: underline;}
.sidenav li {padding: 3px 10px;}
.sidenav .child {padding-left: 10px;}
.dropdown-container {display: none;}

4. And finally, in your page template where you want the menu to appear ... add the following replacing the "sidebar-menu-handle" with the handle of your menu.

{% include 'side-nav', linklist: 'sidebar-menu-handle' %}

There will no doubt be more styling, but this worked for me.

 

View solution in original post

Emery620
New Member
1 0 0

Hello, 

I am looking at creating a side menu for the Debut theme, and I found your post. I have completed step one, but I can't find "new page template" for step two. 

Would you be able to help me find where it is? Also, are you able to post a link to your site so I can see what it looks like?

I am not a fan of how the top menu looks on a desktop. On a mobile device it has a menu button and looks great, that is what I am aiming for with the side navigation. 

Any help would be great, thank you. 

sbiar
Tourist
5 1 6

Hi,

You need to "create" a new page template. In "edit code" under "Templates" select "Add a new template", select "page" and type Liquid & give it a name like "page.sidemenu.liquid". then open "page.liquid" template & copy all the code into the new file. Then you have a "new" template.