<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css"
integrity="sha384-Wrgq82RsEean5tP3NK3zWAemiNEXofJsTwTyHmNb/iL3dP/sZJ4+7sOld1uqYJtE" crossorigin="anonymous">
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="menu"><i class="fa fa-bars" id="menu_icon"></i></a>
<a class="navbar-brand" href="#">
web-logo
</a>
</div><!--navbar-header close-->
<div class="collapse navbar-collapse drop_menu" id="content_details">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-font"></span> About Us</a></li>
<!--<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-font"></span> About us<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Company</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Timing</a></li>
</ul>
</li>-->
<li><a href="#"><span class="glyphicon glyphicon-heart-empty"></span> Why Choose us</a></li>
<li><a href="#"><span class="glyphicon glyphicon-phone"></span> What We Do</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Contact Us</a></li>
<li><a href="#" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-search"></span> Search</a></li>
</ul><!--navbar-right close-->
</div><!--collapse navbar-collapse drop_menu close-->
</div><!--container-fluid close-->
</nav><!--navbar navbar-inverse close-->
<!--search box-->
<div class="container">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Search Section</h4>
</div>
<div class="modal-body">
<section class="search-box1">
<div class="container">
<form class="form-inline" role="form">
<div class="col-sm-8 col-xs-8 form-group top_search" style="padding-right:0px;">
<div class="row">
<label class="sr-only" for="search">Search here...</label>
<span class="serach-footer"><i class="fa fa-search"></i></span>
<input type="text" class="form-control search-wrap" id="search" placeholder="Search here...">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-4 form-group top_search" style="padding-left:0px;">
<button type="submit" class="btn btn-default search-btn">SEARCH</button>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<br>
<div class="container">
<div class="row">
<h2>click on search icon in menu....</h2>
</div>
</div>
/*nav css*/
.navbar-inverse {background-color: #ffffff;border-radius: 0px;width:100%;position: fixed;z-index: 999;border: 0px solid;
-webkit-box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.75);transition:all ease 0.8s;
-moz-box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.75);
box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.75);}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus {
color:rgb(0, 4, 51) !important;background-color: #0e364c;}
.navbar-inverse .navbar-brand {color: rgb(0, 4, 51) !important}
.navbar-inverse .navbar-nav>li>a {color:rgb(255, 102, 0);font-family: 'Open Sans', sans-serif;font-weight: bold;}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {color:rgb(0, 4, 51) !important;}
.menu { display:none;}
.search-box1 {padding: 20px 0px;z-index: 99999;width: 100%;}
.search {padding: 30px 0px;float: left;width: 100%;}
.serach-footer {left: 20px;position: absolute;top: 10px;}
.search-wrap {display: block;width: 100%;height: 40px;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;color: #555;background-color: #fff;
background-image: none;border: 1px solid #e2e2e2;border-radius: 20px;
-webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,.075);
box-shadow: inset 0 0px 0px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
width: 100% !important;padding-left: 45px;}
.search-btn {background:rgb(0, 4, 51);
width: 100%;border-radius: 0px 20px 20px 0px;color: #fff !important;height: 40px;border: 0px solid;font-weight: 600;font-size: 14px;}
.search-btn:hover, .search-btn:focus {background:rgb(0, 4, 51);color: #fff !important;}
.modal-dialog {width: 90% !important;margin: 20% auto;}
.modal-content { background-color:rgb(255, 102, 0);}
.modal-title {color: #ffffff !important;}
/*nav css close*/
@media all and (max-width:768px){
.navbar-inverse .drop_menu {display: block;visibility: visible;width: 110px;height:1000px;padding:0px 20px;position: absolute;right:-100px;
transition:all ease 0.5s;border-top: 0px solid;cursor: pointer;}
a.menu { display:block !important;margin: 9px 2px;float: right;color: rgba(255, 102, 0, 0.98); border:0px solid; background:none; font-size:30px;width:27px;position: relative;
cursor:pointer;}
a.menu:hover, a.menu:focus { color:rgb(0, 4, 51);}
.drop_menu1 { display: block;visibility: visible;width:250px;height:1000px;padding:5px 30px;position: absolute;right:0 !important;
background-color:#ffffff !important; transition:all ease 0.5s;border-top: 0px solid;cursor: pointer;}
}
//canvas off js//
$(document).ready(function(e) {
$('#menu_icon').click(function(){
if($("#content_details").hasClass('drop_menu'))
{
$("#content_details").addClass('drop_menu1').removeClass('drop_menu');
}
else{
$("#content_details").addClass('drop_menu').removeClass('drop_menu1');
}
});
});
