Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Mobile Responsive Header Menu for Genesis Sample Theme ---
// Note: Add only code below to your functions.php
add_action( 'wp_enqueue_scripts', 'amethyst_enqueue_scripts' );
function amethyst_enqueue_scripts() {
//Add mobile button script to Header Right widget navigation menu
wp_enqueue_script( 'header_nav_for_mobile', get_bloginfo( 'stylesheet_directory' ) . '/scripts/header-mobile-nav.js', array('jquery'), '1.0.0' );
// Add this to a /scripts folder in your child theme
jQuery( function($) {
'use strict';
// Insert mobile menu before the Genesis Header Right widget navigation menu
$( '<div id="header-mobile-menu">&#x2261; Menu</div>' ).insertBefore( 'nav.nav-header ul.genesis-nav-menu' );
// Add .hide class to .nav-header .genesis-nav-menu to hide it for small screen sizes
$( 'nav.nav-header ul.genesis-nav-menu' ).addClass( 'hide' );
// Toggle Header Right widget navigation menu for mobile menu
$('#header-mobile-menu').on( 'click', function() {
$('nav.nav-header ul.genesis-nav-menu').slideToggle();
/* Add to the bottom of child theme styles.css */
@media only screen and (max-width: 768px) {
/* Start Header Right Widget Mobile Menu Navigation
--------------------------------------------------- */
.nav-header .genesis-nav-menu.hide {
display: none;
#header-mobile-menu {
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-align: center;
text-transform: uppercase;
#header-mobile-menu:active {
color: #333;
display: block;
.nav-header .genesis-nav-menu .menu-item,
.nav-header .genesis-nav-menu a,
.nav-header .genesis-nav-menu .sub-menu {
border: 0;
text-align: center;
width: 100%;
.nav-header .genesis-nav-menu .menu-item > .sub-menu {
clear: both;
margin: 0;
opacity: 1;
position: inherit;
width: 100%;
@media only screen and (min-width: 769px) {
/* This makes the header nav menu normal again when the browser window expands */
.nav-header .genesis-nav-menu {
display: block !important;
height: auto;
/* Hide Header Mobile Menu Button */
#header-mobile-menu {
display: none;
height: 0;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment