Removing The Default Genesis Responsive Mobile Menu

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.

genesis-responsive-mobile-menu

 

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.

genesis-file-structure

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.

/* # Responsive Menu
---------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 1023px) {
.js .genesis-nav-menu .sub-menu a,
.js .genesis-nav-menu .sub-menu {
width: 100%;
}
.js nav.nav-primary,
.js .site-header nav {
display: none;
position: relative;
}
.js .site-header nav .wrap {
padding: 0;
}
.js nav.pagination {
display: block;
}
.menu-toggle,
.sub-menu-toggle {
border-width: 0;
background-color: #fff;
color: #333;
display: block;
margin: 0 auto;
overflow: hidden;
text-align: center;
visibility: visible;
}
.sub-menu-toggle:hover,
.sub-menu-toggle:focus {
border-width: 0;
}
.menu-toggle {
border-top: 1px solid #eee;
line-height: 20px;
position: relative;
right: 0;
z-index: 1000;
width: 100%;
}
.site-header .menu-toggle {
border: 0;
}
.menu-toggle:before,
.menu-toggle.activated:before {
margin-right: 10px;
text-rendering: auto;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.sub-menu-toggle {
float: right;
padding: 10px;
position: absolute;
right: 0;
top: 0;
z-index: 100;
}
.sub-menu-toggle:before {
display: inline-block;
text-rendering: auto;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.sub-menu-toggle.activated:before {
content: "\f142";
}
.js .nav-primary .genesis-nav-menu .menu-item,
.js .site-header .genesis-nav-menu .menu-item {
display: block;
float: none;
margin: 1px 0;
position: relative;
text-align: left;
}
.js .genesis-nav-menu .menu-item:hover {
position: relative;
}
.js .nav-primary .genesis-nav-menu .menu-item a,
.js .site-header .genesis-nav-menu .menu-item a {
border: none;
padding: 12px 0;
width: 100%;
}
.js .genesis-nav-menu .sub-menu {
border: none;
}
.js .genesis-nav-menu .menu-item > a:focus ul.sub-menu,
.js .genesis-nav-menu .menu-item > a:focus ul.sub-menu .sub-menu {
left: 0;
margin-left: 0;
}
.js .genesis-nav-menu > .menu-item-has-children > a:after {
content: none;
}
.js .genesis-nav-menu .sub-menu {
clear: both;
display: none;
margin: 0;
opacity: 1;
padding-left: 15px;
position: static;
width: 100%;
}
.js .genesis-nav-menu .sub-menu .sub-menu {
margin: 0;
}
.js nav button:hover,
.js .menu-toggle:hover,
.js .nav-primary {
background-color: #fff;
color: #000;
}
.js nav button:focus,
.js .menu-toggle:focus {
background-color: #fff;
color: #c3251d;
}
}
view raw responsive-menu.css hosted with ❤ by GitHub

Move the mobile menu PHP functions

Create a new file in /lib/responsive-menu.php and copy and edit the genesis_sample_enqueue_scripts_styles function, so in the new responsive-menu.php file the new function is as below with a new unique function name and also includes enqueuing our new modular CSS file created in the step previous, for the mobile menu, it also calls and loads the required javascript for the menu.

<?php
//* Enqueue Scripts and Styles for default Mobile Menu
add_action( 'wp_enqueue_scripts', 'genesis_sample_enqueue_menu_scripts_styles' );
function genesis_sample_enqueue_menu_scripts_styles() {
wp_enqueue_script( 'genesis-sample-responsive-menu', get_stylesheet_directory_uri() . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0', true );
wp_enqueue_style( 'genesis-responsive-menu-css' , get_stylesheet_directory_uri() . '/css/responsive-menu.css', array() , '1.0.0', 'all' );
$output = array(
'mainMenu' => __( 'Menu', 'genesis-sample' ),
'subMenu' => __( 'Menu', 'genesis-sample' ),
);
wp_localize_script( 'genesis-sample-responsive-menu', 'genesisSampleL10n', $output );
}
view raw responsive-menu.php hosted with ❤ by GitHub

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' );
view raw functions.php hosted with ❤ by GitHub

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' );

genesis-responsive-mobile-menu-disabled

This is more suited to creating a starter theme that you use over on numerous projects and modularizing components gives you better flexibility.

3 Comments

  1. Atul on December 9, 2016 at 6:05 pm

    After tons of research I finally come to your site and my issue resolved in a minute, I wanted to replace genesis’s default menu with new one and your tutorial helps me a lot. Many thanks.

  2. Lord on September 18, 2016 at 2:07 am

    What if I just want to remove the word “Menu” for the mobile menu? Thanks!

  3. Konstantin on August 9, 2016 at 1:00 pm

    Marvelous! Thanks a lot 🙂

Leave a Comment





%d bloggers like this: