Mobile responsive WordPress themes need navigation menus that are also mobile responsive, so that they can be used easily on devices with small screens. This custom Genesis WordPress theme uses a technique that hides the normal navigation with a mobile menu button on smartphones. This button technique is similar to that used by the WordPress default Twenty Twelve and Twenty Thirteen themes.
Mobile Navigation Demos
- This website – just grab the edge of your browser and make it narrower or view it on your phone
For more methods to create mobile navigation menus, see Adventures in Responsive Navigation.
You can add a responsive website menu to the primary navigation of your Genesis child theme in three easy steps. Similar code can be used for the secondary and header navigation. The code below is for a site using HTML5 on Genesis 2.0.
Update 03/18/14: There is now a tutorial for a mobile navigation menu in the Genesis Header Right widget.
Three Steps for Responsive Website Navigation
- Create a small JQuery file to add the mobile navigation button
- Enqueue the jQuery file in your functions.php
- Add two responsive media sections at the end of your style.css
Note: Be sure to turn your cache plugin OFF before adding new files. Turn it back on once you get everything working again.
Step 1: Create the JQuery File to Add the Mobile Menu Button
First we need to add the menu toggle button. Since jQuery is used for the toggle function, we’re also going to add the button with jQuery. This way, if a browser has jQuery turned off, the button is not added, and the navigation will just be in a single column list, but still usable.
In your /genesis-sample folder, create a folder named “scripts”. Then using a text editor, copy the code below to create a jQuery file, name it “drop-down-nav.js”, and save it to the /scripts folder in your child theme.
jQuery( function($) {
'use strict';
// Insert mobile menu icon before the primary navigation ul
$( '<div id="menu-mobile">≡ Menu</div>' ).insertBefore( 'ul.menu-primary' );
// Add .displaynone class to ul.menu-primary to hide ul.menu-primary for small screen sizes
$( 'ul.menu-primary' ).addClass( 'displaynone' );
// Toggle nav for mobile menu
$('#menu-mobile').click (function(){
$('.menu-primary').slideToggle();
$(this).toggleClass('active');
});
});This jQuery code adds:
- a div with id #menu-mobile to create the button; it also adds an icon and the word “Menu”
- adds a class of .displaynone to ul.menu-primary so that the entire navigation menu can be hidden at small screen sizes
- adds the code to toggle the mobile menu open and closed.
Step 2: Enqueue the jQuery File in Your functions.php
Next enqueue (load) the jQuery script by adding this code at the end of your child theme’s functions.php.
<?php
// Note: Add only code below to your functions.php
add_action( 'wp_enqueue_scripts', 'amethyst_load_mobile_nav_script' );
function amethyst_load_mobile_nav_script() {
//Add mobile button script to primary navigation menu
wp_enqueue_script( 'nav_for_mobile', get_bloginfo( 'stylesheet_directory' ) . 'https://g3f2z8v4.rocketcdn.me/scripts/drop-down-nav.js', array('jquery'), '0.5' );
}Step 3: Add Styles to Your Theme’s style.css
Next we add some style code to the child theme style.css.
First we find the section for screen sizes of the iPad in portrait mode. For the Genesis Sample theme, it begins on line 1571. Find the line:
@media only screen and (max-width: 767px) {
Change the 767px to 768px, and then add the rest of the code. Be sure to keep the columns code that is already in this section too.
@media only screen and (max-width: 768px) {
/* Start Mobile Menu Navigation - Only on .nav-primary
--------------------------------------------------- */
/* Hide .nav-primary */
.nav-primary .genesis-nav-menu.displaynone {
display: none;
}
.nav-primary {
text-align: center;
}
.nav-primary #menu-mobile {
background-color: #333;
color: #999;
cursor: pointer;
display: block;
font-family: Lato, sans-serif;
font-size: 18px;
font-size: 1.8rem;
height: auto;
line-height: 18px;
padding: 20px 16px;
padding: 2rem 1.6rem;
text-transform: uppercase;
}
.nav-primary #menu-mobile:hover,
.nav-primary #menu-mobile:focus,
.nav-primary #menu-mobile:active {
background-color: #333;
color: #fff;
display: block;
}
/* Only .nav-primary is mobile */
.nav-primary .genesis-nav-menu .menu-item,
.nav-primary .genesis-nav-menu a,
.nav-primary .genesis-nav-menu .sub-menu {
text-align: center;
width: 100%;
}
.nav-primary .genesis-nav-menu .menu-item > .sub-menu {
clear: both;
margin: 0;
opacity: 1;
position: inherit;
width: 100%;
}
} /* This bracket already exists */Second an additional media section is needed to make the mobile navigation menu revert to the normal navigation for larger screens, and to hide the mobile navigation button. Add this section at the very bottom of style.css.
@media only screen and (min-width: 769px) {
/* This makes the nav menu normal again when the browser window expands */
.nav-primary .genesis-nav-menu {
display: block !important;
height: auto;
}
/* Hide Mobile Menu Button */
.nav-primary #menu-mobile {
display: none;
height: 0;
}
}Save style.css and now when you resize the browser for your website or look at it on a tablet or smartphone, you should see the mobile responsive navigation menu. You can style it as you like. Questions? Leave a comment.
Genesis themes are available here.
Edit: Added code for Genesis child theme 1.8.
This is for the Genesis child theme 1.8.
Add the jQuery as above; the code is the same. You would also enqueue the jQuery in your functions.php the same as above. I like it better when the Superfish scripts are NOT loaded, but it seems to work fine with it too.
Then you would add this CSS to style.css in the existing media query section for 600px width:
@media only screen and (max-width: 600px) {
/* Mobile Menu added */
#menu-mobile {
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
cursor: pointer;
display: inline-block;
padding: 7px 3%;
width: 100%;
}
#menu-mobile:hover {
background-color: #fff;
}
.menu-primary.displaynone {
display: none;
}
} /* This bracket already exists */And then add this at the end of style.css:
/* This makes the nav menu normal again when the browser window expands */
@media only screen and (min-width: 601px) {
.menu-primary {
display: block !important;
height: auto;
}
/* Hide Mobile Menu Button */
#menu-mobile {
display: none;
height: 0;
}
}You may also need to tweak the CSS to match your navigation styles.
Here is the mobile menu with Superfish scripts turned off.
Leave a Reply