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.
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.
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 %}> > {% for link in linklists[linklist].links %}> {% if link.links != blank %}> >
{% for child_link in link.links %}> {% if child_link.links != blank %}> >
{% for grandchild_link in child_link.links %}> - {{ grandchild_link.title }}> {% endfor %}> > {% else %}> - {{ child_link.title }}> {% endif %}> {% endfor %}> > {% else %}> - {{ link.title }}> {% endif %}> {% endfor %}>
In your new page template for pages to use the side menu add the following script.
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;}
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.
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.
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.