8 Steps to Add Sliding Side Navigation Bar to Debut Theme Shopify - Made4uo - Great Gift Deals

8 Steps to Add Dancing Custom Sliding Side Navigation Bar

Create a eye catching customizable sliding side-nav. Customize the sidebar without destroying your code.

Below are the steps in adding sliding side bar to your Shopify - Debut Theme. This sliding bar will show in every page of your website.


1. First, we have to add a Sidebar menu in the Navigation
Go to Online Store >Navigation> Click Add menu.
2. Make sure you write title "Sidebar Menu"
3. Link collections you want to show
4. Click "save menu"
5. Then, we need to go to Online store> Themes> Actions> Edit code>
6. Go to Section folder, create a new section and name it custom-sidenav. Replace the code below, then click SAVE

.sidenav {
height: 90%;
width: 0;
position: fixed;
z-index: 5;
top: 100;
left: 10;
background-color: {{ section.settings.sidenav_bg_color }};
overflow-x: hidden;
transition: 0.3s;
padding-top: 10px;

.sidenav a {
padding: 8px 8px 8px 15px;
text-decoration: none;
font-size: 20px;
color: {{ section.settings.color_sidenav_contents}};
line-height: 20px;
display: block;
transition: 0.3s;

.sidenavTitle {
color: {{ section.settings.color_sidenav_title}};
font-size: 20px;
.sidenav a:hover {
color: {{ section.settings.color_sidenav_hoover }};
/* Dancing Title */
.dancing {
height: 10%;
width: 50%;
color: {{ section.settings.color_heading }};
border: 0;
padding: 10px 20px;
position: relative;
padding-left: 40px;
word-wrap: break-word;
animation-name: shake;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;

.dancing :hover {
color: {{ section.settings.color_title_hoover }};
animation-duration: 5s;


@keyframes shake {
0% { transform: translate(2px, 2px) rotate(0deg); }
10% { transform: translate(-2px, -3px) rotate(-3deg); }
20% { transform: translate(-4px, 1px) rotate(3deg); }
30% { transform: translate(4px, 3px) rotate(2deg); }
40% { transform: translate(2px, -5px) rotate(3deg); }
50% { transform: translate(-2px, 3px) rotate(-3deg); }
60% { transform: translate(-4px, 2px) rotate(0deg); }
70% { transform: translate(4px, 2px) rotate(-3deg); }
80% { transform: translate(-2px, -5px) rotate(3deg); }
90% { transform: translate(2px, 3px) rotate(0deg); }
100% { transform: translate(4px, -2px) rotate(-3deg); }

.dropdown-btn {
text-decoration: none;
font-size: 30px;
color: {{ section.settings.color_sidenav_contents}};
border: none;
background: none;
cursor: pointer;
outline: none;
margin-left: 0;
padding: 0;
margin-right: 25px;

.dropdown-container {
display: none;
padding-left: 30px;

@media screen and (max-height: 450px) {
.sidenavTitle {
font-size: 10px; };
.sidenav {padding-top: 10px;
padding-left: 10px;
z-index: 9999;}
.sidenav a {font-size: 20px;
z-index: 9999;}


<div id="mySidenav" class="sidenav" onmouseleave="closeNav()" onclick="closeNavClick()">
<div class="grid grid__item small-up--two-thirds" >
<h3 class="sidenavTitle text-center" > {{ section.settings.sidenav_title | escape }} </h3>

{% assign sidebar_link = linklists.sidebar-menu.links %}
<ul> {% for sidebar in sidebar_link %}
<li> <a href="{{ sidebar.url }}">{{ sidebar.title }}</a>
<button class="dropdown-btn">
{% assign child_list_handle = sidebar.title | handleize %}
{% assign child_list = linklists[child_list_handle] %}
{% for child_link in child_list.links %}
{% if child_list != blank %}
<ul class="dropdown-container">
<li><a href="{{ child_link.url }}">{{ child_link.title }}</a></li>
{% endif %}
{% endfor %}
{% endfor %}


<div class= "dancing">
<span onclick="openNav()">
<h3>{{ section.settings.title | escape }}</h3>

function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.body.style.backgroundColor = 'rgba(0,0,0,0)';

function closeNav() {
document.getElementById("mySidenav").style.width = "0";

var side_dom = document.getElementById("mySidenav")
if(side_dom.style.width == '250px'){
document.getElementById("mySidenav").style.width = "0";

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {

var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
this.innerHTML = "<strong>+</strong>";
} else {
dropdownContent.style.display = "block";
this.innerHTML = "<strong>-</strong>";


{% schema %}
"name": {
"en": "Sliding Side Nav"
"class": "index-section",
"settings": [
"type": "text",
"id": "title",
"label": {
"en": "Slide Title"
"default": {
"en": "See Collection"

"type": "color",
"id": "color_heading",
"label": "Slide Title Font Color",
"default": "#2C2828"
"type": "color",
"id": "color_title_hoover",
"label": "Title Hoover Color",
"default": "#30e3ca"
"type": "text",
"id": "sidenav_title",
"label": {
"en": "Inside Nav Title"
"default": {
"en": "Collection"

"type": "color",
"id": "color_sidenav_title",
"label": "Inside Nav Title Font Color",
"default": "#2C2828"
"type": "color",
"id": "color_sidenav_contents",
"label": "Inside Nav Font Color",
"default": "#2C2828"
"type": "color",
"id": "color_sidenav_hoover",
"label": "SideNav Hoover Color",
"default": "#30e3ca"
"type": "color",
"id": "sidenav_bg_color",
"label": "SideNav Background Color",
"default": "#D4FDF6"

{% endschema %}

7. Go to Layout folder and open theme.liquid. After section header, place the code below, then click SAVE
{% section 'custom-sidenav' %}
8. Add the section and customize the section


Tips: Sidebar is created as a section so customizing will be easy. If you know a little about coding.

You can create a snippet instead and render the code in the header section. You can replace the code in pink to real value. Then delete the whole schema code in blue. To render the code in the header.liquid, just place this code {% render 'custom-sidenav' %} before the </header>.

For full instructions on creating a Snippet Sidebar, visit the link with a code.


Don't forget to follow me to my journey in transforming my Shopify website.

You can send me an email at yoursupport@made4uo.com if you have any questions. 



Updated: 07/31/2021 - added some animation on the title and a sub menu
                08/13/2021 - added tip instructions on how to add a snippet


Convert Dawn Product Page Like Debut Theme with Product Slider

Product slider but counter does not make sense? See my way around. Transform your Dawn product pa...

How to make hero image the background for header - DAWN Theme

Hero image to be the background for header. It is possible. Just follow the steps below. I recomm...

Featured collection slider for Dawn Theme Shopify 2.0

Add a collection slider for your home page. This only works with Dawn Theme.

Adjust Main and Thumbnail Product Images in the Product Page for Dawn Theme

Dawn Theme issues with large images? Solve that using this video tutorial

Product Slider for Dawn Theme - No apps or subscript- Just a little bit of code

Add a product slider for Dawn theme, almost like Debut theme slider. No app or subscription neede...

Tab Component Section - Pure CSS

Add a tab component as a section which means, you can add it to any pages in Shopify 2.0, like pr...

Add WhatsApp to Shopify for Free - No App or Subscription

Add WhatsApp to your Shopify website without app or subscription. Personalize the icon with your ...

Product / Card Automatic Swipeable Carousel / Slider for Most of Shopify Theme

Add a carousel / slider for your product or card without an app or external library. This work in...


@Antonia Mungin Which menu you want?


how can i change the menu i want to use because it reverting back and i have a custom menu i want to use

Antonia Mungin

Leave a comment