bootstrap 3 menu slide from right

      <div class="container-fluid menu_logo_area menu_area">
        <div class="container">
          <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid nopad">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="slide-collapse" data-target=".navbar-ex1-collapse">
                  <i class="fa fa-bars" aria-hidden="true"></i>
                </button>
                <a class="navbar-brand" href="#"><img src="images/logo.png" alt="logo" class="img-responsive"></a>
              </div>
          
              <!-- Collect the nav links, forms, and other content for toggling -->
                  <div class="menu_from_side">
              <div class="collapse navbar-collapse navbar-ex1-collapse" id="slide-navbar-collapse">


                <ul class="nav navbar-nav navbar-right">
                  <li class="active"><a href="index.html">Home</a></li>
                  <li><a href="#">About</a></li>
                  <li><a href="#">Sermons & Videos</a></li>
                  <li><a href="#">Our Ministries</a></li>
                  <li><a href="#">Contact Us</a></li>
                </ul>
              </div><!-- /.navbar-collapse -->
            </div>
            </div>
          </nav>
        </div>
      </div>
      
      
      
      
      
      
      
      
      @media (max-width: 992px){
.navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }	
	nav.navbar.navbar-default.menu {
	    position: relative;
	    top: -50px;
	}
	.menu .container {
	    padding: 0;
	}

button.navbar-toggle {
    border: none;
    padding: 0;
    margin-top: 20px;
    font-size: 30px;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: transparent;
}
  #slide-navbar-collapse {
    position: absolute;
    z-index: 99999;
    left: 0;
    right: 0;
    width: 100%;
    background: white;
    transition: all 1s;
    display: block;
    visibility: hidden;
    margin: auto;
    padding-bottom: 20px;
  }
.menu_from_side {
    overflow: hidden;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    margin: auto;
    transition: all 1s;
}

.menu_area{
position: relative;
}
nav.navbar.navbar-default {
    position: static;
}










}











function menu(){
	if ($(window).width() <= 992) {


		$('.menu_from_side').css({
		  top: $('nav.navbar.navbar-default').css('height')
		});

		$('div#slide-navbar-collapse').css({
		  visibility: 'hidden',
		  left: $(window).width()+'px'
		});



		var nav_h =  $('div#slide-navbar-collapse').height();
		nav_h = nav_h + 20;
 		$('.menu_from_side').css({
		  width: $(window).width()+'px',
		  height: nav_h+'px'
		});

		$('[data-toggle="slide-collapse"]').click(function() {
			var box = $($(this).data('target'));
			if(box.css('left') == '0px'){
				box.css({
					visibility: 'hidden',
					left: $(window).width()+'px'
				});

				$('.menu_from_side').css({
				  background: 'none',
				});

			}else{
				box.css({
					visibility: 'visible',
					left: '0px',
					width: $('.menu_from_side').parent().width()+'px'
				});
				$('.menu_from_side').css({
				  background: '#fff',
				});

			}

		});

	}else{
		$('div#slide-navbar-collapse').removeAttr('style');
		$('.menu_from_side').removeAttr('style');
	}
}


jQuery(document).ready(function($) {
			menu();
		window.addEventListener("resize", function() {
		    menu();
		    slider();

		}, false);
});