Genesis Mobile Menu Using Font Awesome
/* ## Mobile Menu
--------------------------------------------- */
.site-header .mobile-menu {
display: none;
font-size: 28px;
}
.site-header .mobile-menu i {
cursor: pointer;
}
.site-header .mobile-menu i:hover {
color: #d54e21;
}
.site-header .mobile-menu i.hidden {
display: none;
}
@media only screen and (max-width: 800px) {
.site-header .mobile-menu {
display: block;
text-align: center;
}
.nav-primary {
display: none;
}
.nav-primary .genesis-nav-menu .menu-item {
font-size: 18px;
display: block
}
.nav-primary .genesis-nav-menu a {
background-color: transparent;
padding: 12px 16px;
}
.nav-primary .genesis-nav-menu a:hover,
.nav-primary .genesis-nav-menu .current-menu-item > a,
.nav-primary .genesis-nav-menu .sub-menu .current-menu-item > a:hover {
background-color: transparent;
color: #d54e21;
}
}//* Add mobile menu...
add_action( 'genesis_header', 'wpdevco_mobile_menu', 12 );
function wpdevco_mobile_menu() {
echo '<div class="mobile-menu mobile-show"><i class="fa fa-bars"></i><i class="fa fa-close hidden"></i></div>';
}jQuery(document).ready(function($) {
//* Mobile menu...
$('.mobile-menu .fa-bars, .mobile-menu .fa-close').click(function(e){
$('.mobile-menu .fa-bars, .mobile-menu .fa-close').toggleClass('hidden');
$('.nav-primary').slideToggle();
e.preventDefault();
});
});//* Enqueue all the things...
add_action( 'wp_enqueue_scripts', 'wpdevco_enqueue_things' );
function wpdevco_enqueue_things() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css', array(), '4.2.0' );
wp_enqueue_script( 'wpdevco-js', get_stylesheet_directory_uri() . '/js/functions.js', array( 'jquery' ), '1.0.0' );
}