This guide looks at removing the Genesis responsive built in mobile menu, well, not just removing it but making it more modular to either use or not
This is based on using the sample theme and with a simple code comment/uncomment you can enable or disable the mobile menu. There are times where you may want to use an alternative mobile menu and it may clash with the existing Genesis menu or there are times when you simply don’t require a mobile menu, like when you only have a few menu items to display.
This approach looks at just making one change to either enable or disable the menu. A couple of new files need to be made and the relevant CSS and PHP need to be moved into, our new structure will look like the below.
Move the relevant Mobile Menu CSS
Create a new folder and file, /css/responsive-menu.css and move into it all the CSS which has the .js and .menu-toggle and .sub-menu-toggle CSS selectors, most of these are all together in style.css in the Media Query 1023px section and one selector in the Accessibility section.
Move the mobile menu PHP functions
Include the new PHP file from functions.php
So now if you want to use the default mobile menu include the new PHP file in your functions.php
|// Genesis Default Responsive Menu|
|include_once( get_stylesheet_directory() . '/lib/responsive-menu.php' );|
If you don’t wish to use the mobile menu, simply comment it out
// Genesis Default Responsive Menu //include_once( get_stylesheet_directory() . '/lib/responsive-menu.php' );
This is more suited to creating a starter theme that you use over on numerous projects and modularizing components gives you better flexibility.