Responsive Navigation (Mobile Menu) - Slide

javascript

jQuery(document).ready(function($){
     var isDevice = /Mobile|webOs|iPad|IEMobile|Windows Phone/.test(navigator.userAgent);
       if (isDevice) {
           jQuery('.mobile-menu-button').unbind('click').toggle(function (){
               jQuery('.responsive-menu').show().animate({right:'0'},300);
               jQuery('.ib-overlay').css('display','block');
               jQuery('body').css('overflow','hidden');
           }, function (){
              jQuery('.responsive-menu').animate({right:'-260px'},300);
               jQuery('.ib-overlay').hide();
              jQuery('body').css('overflow','auto');
           }); 
        }
        jQuery('.responsive-menu .close-button').before().live('click', function (e){
             jQuery('.responsive-menu').animate({right:'-260px'},300);
            jQuery('.ib-overlay').hide();
             jQuery('body').css('overflow','auto');
             e.stopPropagation();
             jQuery('.mobile-menu-button').trigger('click');
        });
        jQuery('.ib-overlay').live('click', function (){
            if(jQuery('.responsive-menu').css('right')==='0px' || jQuery('.responsive-menu').css('right')===0){
                jQuery('.responsive-menu .close-button').before().trigger('click');
            }
        });
});

php_code

/* Function to add in function.php */

add_action('genesis_after_footer', 'dynamic_mobile_nav');
function dynamic_mobile_nav() { 
    echo '<div class="ib-overlay"></div>';    
    echo '<div class="mobile-menu-button"></div>';   
    echo '<div class="responsive-menu">';   
    echo '<div class="close-button"></div>';        
    wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'mobile-menu' ) );
    get_search_form( 'true' );    
    echo '</div>';
}

style

/* Mobile Menu */
.ib-overlay {
    display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}
.mobile-menu-button:before {
        content: "\f0c9";
        font-family: "FontAwesome";
        font-size: 34px;color: #fff;
        }
.responsive-menu {
   /*display: none;*/
   position: fixed;
   top: 0;
   right: -260px;
   z-index: 100001;
   height: 100%;
   width: 245px;
   background-color: #005b97;
   text-transform: uppercase;
   font-family: Raleway;
   font-weight: 400;
   border-left: 2px solid #054F7F ;
   overflow-y: auto;
}
.responsive-menu .close-button {
       padding: 15px 10px;
       height: 55px;
       font-size: 30px;
       cursor: pointer;
       color: #fff;
   }
.responsive-menu .close-button:before {
       content: "\f00d";
       font-family: 'FontAwesome';
   }

.responsive-menu  ul {
       margin-left: 0;
   }
.responsive-menu  ul li  a {
               color: #fff;
               display: block;
               padding: 15px 5px;
               border-bottom: 1px solid #054F7F ;
               padding-left: 10px;        
}
.responsive-menu  ul .current_page_item a {
   background-color: #191919 ;
   color: #fff;
   font-weight: 600;
}
.nav-primary {
   display: none;
}