Responsive Mobile menu

by Digvijay Naruka

HTML

<script src="&lt;link href=&quot;https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN&quot; crossorigin=&quot;anonymous&quot;&gt;"></script>

<header id="masthead" class="site-header">
			<div class="main-header">
				<div class="site-branding" style="height: 100px;">
					<a href="http://localhost/sbdc/" class="custom-logo-link" rel="home" itemprop="url"><img width="150" height="90" src="" class="custom-logo" alt="ASU SBDC" itemprop="logo">LOGO here</a>						
									</div><!-- .site-branding -->
				<div class="navigation">

					<nav id="site-navigation" class="main-navigation toggled">
						<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="true"><div id="nav-icon"><span></span><span></span><span></span><span></span></div></button>
						<div class="menu-mainmenu-container"><ul id="primary-menu" class="menu nav-menu" aria-expanded="true"><li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-28"><a href="http://localhost/sbdc">Home</a></li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-29"><a href="http://localhost/sbdc/about-us/">About Us</a></li>
<li id="menu-item-109" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-109"><a href="#">Services</a>
<ul class="sub-menu">
	<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="http://localhost/sbdc/start-a-business/">Start A Business</a></li>
</ul>
</li>
<li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-114"><a href="http://localhost/sbdc/events-spider/">Events</a>
<ul class="sub-menu">
	<li id="menu-item-171"...

CSS

.main-navigation {
	clear: both;
	display: block;
	float: left;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	left: 100%;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	float: left;
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.navigation #bz-menu {
	display: block; ;
}

.navigation #bz-menu ul{
	display: none;
}
/*.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}*/

button.menu-toggle {
    position: absolute;
    top: 10px;
    right: 38px;
    background: none;
    z-index: 99999;
    border: 0;
    font-size: 24px;
    outline: 0;
    padding: 0;
    /*color: #fff;*/
} 

button.menu-toggle {
	    background:transparent;
	    border: 0;
	    padding:0;
	    box-shadow: none;
	    border-radius: 0;
	    color: #333;
	    position: absolute;
	    right:78px;
	    top:24px;
	    outline-color: #fff;
	}
@media screen and (min-width: 57.5em) {
	.menu-toggle {
		display: none;
	}
	.main-navigation ul {
		display: block;
	}

	.navigation #bz-menu {
    	display: none;
  	}

}

.cl_drop_menu i {
    color: #fff;
    font-size: 14px;
}
li.menu-item-has-children i {
    position: absolute;
    top: 0px;
    right: 0px;
    color: #fff;
    background: #888;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
}
 .cl_drop_menu i {
		display: none;
	}
.cl_drop_menu i {
    color: #fff;
    font-size: 14px;
}
@media screen and (max-width: 920px){
  	
  .cl_drop_menu i {
		display:...

JavaScript

$(function(){
        $(".menu-toggle").click(function(){
            $(".navigation #bz-menu ul").slideToggle("fast");
            $(this).children('#nav-icon').toggleClass('open');
        });
    });

//Submenu Dropdown Toggle
    if($('li.menu-item-has-children ul').length){
        $('li.menu-item-has-children').append('<div class="cl_drop_menu"><i class="fa fa-angle-down"></i></div>');
        
        //Dropdown Button
        $('.cl_drop_menu').on('click', function() {
            $(this).prev('ul').slideToggle(500);
            if($(this).children('.fa').hasClass('fa-angle-up'))
            {
                $(this).children('.fa').removeClass('fa-angle-up');
                $(this).children('.fa').addClass('fa-angle-down');
            }
            else{
                $(this).children('.fa').removeClass('fa-angle-down');
                $(this).children('.fa').addClass('fa-angle-up');
            }
            
        });
    }