wpdevco
11/24/2014 - 10:29 PM

Genesis Mobile Menu Using Font Awesome

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