*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.
- - - - - - - *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; } } /*----*/