Multi-Level Navigation for Wordpress

768.scss

nav.js {
        li ul {
                display: block;
        }
        
        .menu_button{
                display: none;
        }
        .top-nav{
		display: inline-block;
	}
}

base.scss

.menu_button { //If there isn't any javascript, then hide the button and just show the menu
  display: none;
}

nav.js { // If there IS javascript, then show a button that drops down

	.menu_button {
		position: relative;
		display: block;
		text-align: center;
		@include font-size(1); // <----- CHANGE THE FONT SIZE
		background: $brand; // <----- CHANGE THE COLOUR
		border-radius: 4px;
		color: $white; // <----- CHANGE THE COLOUR
		cursor: pointer;
	}
	.top-nav{
		display: none;
	}	
}

header.php

<span class="menu_button">Menu</span>

scripts.js

// as the page loads, call these scripts
jQuery(document).ready(function($) {

    /*
    Responsive jQuery is a tricky thing.
    There's a bunch of different ways to handle
    it, so be sure to research and find the one
    that works for you best.
    */
    
    /* getting viewport width */
    var responsive_viewport = $(window).width();

	$('#inner-header nav').addClass('js'); // Target your navigation container here
	$('.menu_button').click( function(){ //This is the button in your header
		$('.top-nav').slideToggle(500); // This is the <UL> that is inside your navigation
		$('.top-nav').toggleClass('open'); //This adds the class OPEN
	});
	// This part stops the links from working if they have another level,
	// on first click, show the sub-nav, on second click, follow href
	
	$(".top-nav > li > a").each(function(){
		if ($(this).parent().children().length > 1) {
			$(this).one("click", function(e) {
				//This will return true after the first click 
				//and preventDefault won't be called.
				if (responsive_viewport < 768) {
					e.preventDefault();
					$(this).parent().children(".sub-menu").addClass('open');
				}
			});
		}
	});

    /* if is below 481px */
    if (responsive_viewport < 481) {
    
    } /* end smallest screen */
    
    /* if is larger than 481px */
    if (responsive_viewport > 481) {
        
    } /* end larger than 481px */
    
    /* if is above or equal to 768px */
    if (responsive_viewport >= 768) {
       
    }
    
    /* off the bat large screen actions */
    if (responsive_viewport > 1030) {
        
    }
    
	
	// add all your scripts here
}); /* end of as page load scripts */