Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Add Mmenu Off Canvas Mobile Menu to Genesis Child Theme
/**********************************
*
* Add id="menu" attribute to Primary Navigation
*
* @author AlphaBlossom / Tony Eppright
* @link http://www.alphablossom.com
*
**********************************/
add_filter( 'genesis_attr_nav-primary', 'youruniqueprefix_primary_nav_id' );
function youruniqueprefix_primary_nav_id( $attributes ) {
$attributes['id'] = 'menu';
return $attributes;
}
/**********************************
*
* Add menu control for Mmenu
*
* @author AlphaBlossom / Tony Eppright
* @link http://www.alphablossom.com
*
**********************************/
/* Navigation functions */
add_action( 'genesis_before', 'youruniqueprefix_nav_control', 1 );
function youruniqueprefix_nav_control() {
?>
<div id="header">
<a href="#menu">
<i class="fa fa-bars"></i>
</a>
</div>
<?php
}
/* Mobile Navigation control */
#header {
display: none;
}
jQuery(document).ready(function($) {
$(function() {
// initiate mmenu
$("#menu").mmenu({
// options go here
}, {
// configuration:
clone : true,
});
});
});
/**********************************
*
* Enqueue Style and Scripts for Mmenu.
*
* @author AlphaBlossom / Tony Eppright
* @link http://www.alphablossom.com
*
**********************************/
add_action( 'wp_enqueue_scripts', 'youruniqueprefix_load_scripts');
function youruniqueprefix_load_scripts() {
// CSS
wp_enqueue_style( 'youruniqueprefix_mmenu_css' , CHILD_URL . '/css/jquery.mmenu.css' , null );
// JS
wp_enqueue_script( 'youruniqueprefix_mmenu_js' , CHILD_URL . '/js/jquery.mmenu.min.js' , array( 'jquery' ), '4.2.6', FALSE ); // mmenu js
wp_enqueue_script( 'youruniqueprefix_headerscript_js' , CHILD_URL . '/js/headerscript.js' , array( 'jquery' ), '1.0', FALSE ); // custom header j
}
@media only screen and (max-width: 767px) {
/* Mobile Navigation */
.site-container .nav-primary {
display: none;
}
.mm-page #header {
display: block;
position: absolute;
}
.mm-page #header a {
border-right: 1px solid #666;
display: block;
height: 64px;
text-align: center;
width: 64px;
}
.mm-page #header a i {
border-right: 1px solid #FFFFFF;
font-size: 20px;
line-height: 64px;
width: 63px;
}
}
.site-container .genesis-nav-menu {
clear: both;
color: #fff;
font-family: 'Lato', sans-serif;
letter-spacing: 1px;
letter-spacing: 0.1rem;
line-height: 1.5;
margin: 0;
padding: 0;
width: 100%;
}
.site-container .genesis-nav-menu .menu-item {
display: inline-block;
margin: 0;
padding: 0;
text-align: left;
float: left;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.