Add a mobile responsive "toggle" or "hamburger" menu to the Epik theme

I started with the above link and got it working for me. I have the menu in the widget area in the header and have modified it until it worked.

# CSS
Step 1. Place this piece of CSS code below into your theme’s CSS file that’s not inside of a media query.

#mobile-menu {
display: none;
visibility: hidden;
}

Step 2. This next piece of CSS code needs to be inside of a media query. I’ve chosen to switch to the mobile menu icon when the max-width of a browser is 580px.

@media only screen and (max-width: 580px) {
	#mobile-menu {
		background: url("/wp-content/uploads/2013/12/icon-mobile.png") no-repeat scroll 0 0 transparent;
		cursor: pointer;
		display: inline-block;
		float: center;
		height: 30px;
		width: 41px;
		visibility: visible;
	}
	
	#nav_menu-7.widget.widget_nav_menu {
		display: none;
	}
	
	#text-26.widget.widget_text {
		display: none;
	}
}

/* Make sure main menu re-appears when scaled up */
@media only screen and (min-width: 581px) {
	#nav_menu-7.widget.widget_nav_menu {
		display: block !important;
	}
	
	#text-26.widget.widget_text {
		display: block !important;
	}
}<!--formatted-->

Then the script I changed to this

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($){
    /* prepend menu icon */
	$('.widget-area.header-widget-area').append('<div id="mobile-menu"></div>');
 
	/* toggle nav */
	$("#mobile-menu").on("click", function(){
		$("#nav_menu-7.widget.widget_nav_menu").slideToggle();
		$("#text-26.widget.widget_text").slideToggle();
		$(this).toggleClass("active");
	});
});
// ]]></script><!--formatted-->

If you notice, for this example I made 2 widgets toggle together under the menu button.

If you don’t want that, you can take out the references in the CSS

	#text-26.widget.widget_text {
		display: none;
	}

and

	#text-26.widget.widget_text {
		display: block !important;
	}

and in the Script

		$("#text-26.widget.widget_text").slideToggle();
<!--formatted-->

Hope that helps someone.

Obviously, you will have to find the relevant CSS id’s to your installation, but they will be something like mine, which were:
#text-26.widget.widget_text
And
#nav_menu-7 .widget .widget_nav_menu

FWIW, I finally got the hamburger to appear by adding the following code snippet to epik’s functions.php:

//* Enqueue mobile header script
add_action( 'wp_enqueue_scripts', 'lb_mobile_header' );
function lb_mobile_header() {
        wp_enqueue_script( 'lb_mobile_header', get_stylesheet_directory_uri() . '/js/lb_mobile_header.js', array( 'jquery' ), '', true );
}