*Add js folder to your template directory. The js folder contains the file "functions.js". This is needed in order for the responsive menu to function.

- - - - -

*Add the following to functions.php:

// This script is needed for the mobile-optimized menu.
function debase_scripts() {
	wp_enqueue_script( 'debase-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20131209', true );
}
add_action( 'wp_enqueue_scripts', 'debase_scripts' );

- - - - -

*Add the following to header (if needed). I recommend you implement it with your current menu.

        <div class="main-navigation-container">
            <nav class="main-navigation site-navigation" id="primary-navigation">
                <h1 class="menu-toggle"></h1>
                <?php wp_nav_menu( array( 'theme_location' => 'main', 'menu_class' => 'nav-menu' ) ); ?>
            </nav>
        	<div class="clearfloat"></div>
        </div>

- - - - - - -

*These are the styles that go with the new responsive menu. Some of these styles will work with the old menu, but I recommend starting over with the styling, and then just go back and implement your custom styles. This process may take some work, but the end result will be awesome!

/*
----------------------------------------------------------------------------------------------------------------------
******** Navigation ********
----------------------------------------------------------------------------------------------------------------------
*/
/* Use these styles to customize the active menu item. */
.current-menu-item {
}
.current-menu-item a {
	color: #000 !important;
}

.main-navigation-container {
	background: #78cdd2;
	width: 100%;
}

.main-navigation-container {
	width: 100%;
	background: #78cdd2;
}

.main-navigation {
	max-width: 960px;
	height: auto;
	margin: auto;
	padding: 0;
    font-size: 16px;
	font-weight: bold;
}

.sub-menu {
	position: relative;
	line-height: 18px;
	padding: 0;
	background: #78cdd2;
}

.sub-menu.toggled-on {
	background-color: #78cdd2;
}

.sub-menu ul li {
	line-height: 18px;
}

/* These are the styles for when the mobile menu is toggled on (active). */
.main-navigation.toggled-on {
	padding: 0;
}

.main-navigation .nav-menu {
	display: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.main-navigation.toggled-on .nav-menu {
	display: block;
	margin: 0;
	padding: 0;
}

.main-navigation.toggled-on .nav-menu a {
	display: block;
	padding: 0 12px;
	white-space: nowrap;
    color: #fff;
	text-decoration: none;
}

.main-navigation.toggled-on .nav-menu a:hover {
	color: #000;
}

.main-navigation.toggled-on .nav-menu li {
	position: relative;
	list-style: none;	
	display: block;
	line-height: 38px;
	border: none;
	text-transform: uppercase;
	border-top: 1px solid #61b0b5;
}

.main-navigation.toggled-on .nav-menu .sub-menu {
	padding: 0;
	font-size: 14px;
}

.main-navigation.toggled-on .nav-menu .sub-menu li a {
	padding-left: 25px;
}

.main-navigation.toggled-on .nav-menu .menu-main-menu-container {
	border-top: 1px solid #61b0b5;
}

.main-navigation.toggled-on .nav-menu ul ul a:hover, .main-navigation ul ul li.focus > a {
	color: #000 !important;
	-webkit-transition: color 0.2s; /* For Safari 3.1 to 6.0 */
	transition: color 0.2s;
}

.main-navigation.toggled-on .nav-menu li:hover > a, .main-navigation li.focus > a {
	color: #000 !important;
	-webkit-transition: color 0.2s; /* For Safari 3.1 to 6.0 */
	transition: color 0.2s;
}
/*----*/



/*
----------------------------------------------------------------------------------------------------------------------
******** Media Queries ********
----------------------------------------------------------------------------------------------------------------------
*/
/* These styles are needed in order for the mobile menu to work. Be very careful when editing these styles!! */
@media screen and (max-width: 750px) {
.menu-toggle {
	width: 48px;
	height: 38px;
	margin: 0;
	position: relative;
	top: 0;
	right: 0;
	cursor: pointer;
	overflow: hidden;
	font-size: 0;
	text-align: center;
	display: inline-block;
	background: url(images/menu-toggle.png) no-repeat 15px 15px;
}
}

@media screen and (min-width: 750px) {
.main-navigation .menu-toggle {
	display: none;
	padding: 0;
}

.main-navigation .nav-menu {
	display: block;
	margin: 0;
	padding: 0;
	border-bottom: 0;
}

.main-navigation.toggled-on {
	border-bottom: 0;
	margin: 0;
	padding: 0;
}

.main-navigation a {
	display: inline-block;
	padding: 0 12px;
	white-space: nowrap;
    color: #fff;
	text-decoration: none;
}

.main-navigation li {
	position: relative;
	list-style: none;	
	display: inline-block;
	line-height: 38px;
	border: none;
	text-transform: uppercase;
}

.main-navigation li li {
	height: auto;
	display: block;
	line-height: 1.0909090909;
	border: 0;
}

.main-navigation ul ul {
	top: 38px;
	left: -999em;
	z-index: 99999;
	position: absolute;
	margin: 0;
	margin-left: 15px;
	float: left;
}

.main-navigation ul ul a {
	width: 150px;
	padding: 8px;
	padding-left: 15px;
	white-space: normal;
	border-top: 1px solid #61b0b5;
	font-size: 14px;
	color: #FFF !important;
}

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

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

.main-navigation ul ul a:hover, .main-navigation ul ul li.focus > a {
	color: #000 !important;
	-webkit-transition: color 0.2s; /* For Safari 3.1 to 6.0 */
	transition: color 0.2s;
}

.main-navigation li:hover > a, .main-navigation li.focus > a {
	color: #000 !important;
	-webkit-transition: color 0.2s; /* For Safari 3.1 to 6.0 */
	transition: color 0.2s;
}

ul ul ul {
	top: 32px !important;
	border: 1px solid #61b0b5;
	border-top: 0;
	background: #61b0b5;
}
}
/*----*/