i want to create menu which is floating..when i scroll down page it should come down means float...its should be responsive
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css" />
<link href="css/core.css" rel="stylesheet" type="text/css" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/responsive.css" rel="stylesheet" type="text/css" />
<link href="css/style-customizer.css" rel="stylesheet" type="text/css" />
<style>
.header
{
box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 99;
}
.header .logo
{
display: inline-block;
margin-bottom: -23px;
position: relative;
}
.header-right, .header-right .search
{
float: right;
}
.mgea-full-width
{
position: relative;
}
.header-right .search, .header-menu, .menu ul li
{
display: inline-block;
}
.header-right .search, .header-menu, .menu ul li
{
display: inline-block;
}
.menu ul li
{
position: relative;
}
.header-right .search, .header-menu, .menu ul li
{
display: inline-block;
}
li
{
list-style: none;
}
.menu ul li a
{
color: #535353;
display: block;
font-size: 15px;
font-weight: bold;
padding: 50px 0 50px 32px;
text-transform: uppercase;
}
.menu ul li a:hover
{
color: #e54c2a;
}
.header-right .search
{
padding-left: 38px;
padding-top: 47px;
}
.header-right .search, .header-menu, .menu ul li
{
display: inline-block;
}
.header-right, .header-right .search
{
float: right;
}
.search-inside
{
position: absolute;
right: 0;
top: 35px;
width: 100%;
z-index: 99999999;
}
.search-inside a.search-close
{
color: #777;
font-size: 18px;
position: absolute;
right: -22px;
top: 12px;
}
.search-inner > a
{
color: #535353;
font-size: 22px;
font-weight: bold;
}
.searchbar-inner .search
{
position: relative;
}
.mdi
{
display: inline-block;
font: normal normal normal 24px/1 "Material Design Icons";
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
.searchbar-inner .search input
{
background: #fff none repeat scroll 0 0;
border: 1px solid #ddd;
color: #535353;
font-size: 20px !important;
height: 50px;
z-index: 1;
}
.searchbar-inner .search button
{
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
color: #777;
font-size: 24px;
position: absolute;
right: 10px;
top: 10px;
}
.mdi:hover
{
color: #e54c2a;
}
</style>
<!-- style for footer -->
<style>
@media (max-width: 1500px) and (min-width: 1200px).ptb-100
{
padding: 80px 0;
}
.grey-bg {
background: #f1f1f1;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
h3.single-footer-title {
color: #535353;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
margin: 0;
}
.mt-30 {
margin-top: 30px;
}
.single-footer-details ul {
display: block;
padding-top: 10px;
}
ul {
margin: 0px;
padding: 0px;
}
ol, ul {
list-style: none;
}
.single-footer .open-list li {
color: #535353;
margin-bottom: 5px;
text-transform: capitalize;
}
li {
list-style: none;
}
.single-footer .open-list li span {
font-weight: bold;
}
.single-footer.instagram ul li {
padding-bottom: 15px;
padding-right: 15px;
}
.single-footer.instagram ul li {
float: left;
width: 33.33%;
}
li {
list-style: none;
}
.single-footer.instagram ul li a {
display: block;
position: relative;
overflow: hidden;
}
a, button, input {
outline: medium none;
color: #4FC1F0;
}
.single-footer.instagram ul li img {
width: 100%;
}
img {
max-width: 100%;
}
p {
font-size: 14px;
font-weight: normal;
line-height: 24px;
color: #757575;
margin-bottom: 15px;
}
p {
margin: 0 0 10px;
}
.newsletter-form input {
background: none repeat scroll 0 0 #fff;
border: medium none;
color: #999999;
font-weight: 600;
}
input {
border: 2px solid #eceff8;
height: 45px;
box-shadow: none;
padding-left: 10px;
font-size: 14px;
width: 100%;
}
.newsletter-form button {
background: none repeat scroll 0 0 #e54c2a;
border: medium none;
color: #fff;
display: inline-block;
font-size: 12px;
font-weight: bold;
margin-top: 15px;
padding: 14px 38px;
text-transform: uppercase;
-webkit-transition: all .3s ease 0s;
transition: all .3s ease 0s;
}
a, button, input {
outline: medium none;
color: #4FC1F0;
}
a, button {
font-family: 'Raleway', sans-serif;
}
.white-bg {
background: #fff;
}
.ptb-20 {
padding: 20px 0;
}
.text-center {
text-align: center;
}
.copyright {
background: none repeat scroll 0 0 #e54c2a;
}
p {
font-size: 14px;
font-weight: normal;
line-height: 24px;
color: #757575;
margin-bottom: 15px;
}
.copyright p a {
color: #fff;
font-weight: bold;
}
a, button, input {
outline: medium none;
color: #4FC1F0;
}
.copyright p {
color: #fff;
font-size: 13px;
text-transform: capitalize;
}
.copyright p {
margin: 0;
}
.pattern-fixed.pattern {
background: url(images/bg/pattern.png) repeat fixed 0 0;
}
.boxed-layout .wrapper {
box-shadow: -3px 0 50px -2px rgba(0, 0, 0, 0.14);
margin: auto;
position: relative;
width: 1500px;
}
.white-bg {
background: #fff;
}
.boxed-layout .sticky {
left: 0;
right: 0;
width: 1500px;
.sticky {
-webkit-animation: 600ms ease-in-out 0s normal none 1 running fadeInDown;
animation: 600ms ease-in-out 0s normal none 1 running fadeInDown;
background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
left: 0;
margin: auto;
position: fixed;
top: 0;
z-index: 999;
width: 100%;
}
}
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Place favicon.ico in the root directory -->
<link href="ClientSide/images/apple-touch-icon.png " type="images/x-icon" rel="shortcut icon" />
<!-- All css files are included here. -->
<link rel="stylesheet" type="text/css" href="ClientSide/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="ClientSide/css/core.css" />
<link rel="stylesheet" type="text/css" href="ClientSide/css/default.css" />
<link rel="stylesheet" type="text/css" href="ClientSide/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="ClientSide/css/materialdesignicons.min.css" />
<link rel="stylesheet" type="text/css" href="ClientSide/css/responsive.css" />
<link rel="stylesheet" type="text/css" href="ClientSide/css/plugins/animate.css" />
<link rel="stylesheet" type="text/css" href="ClientSide/css/plugins/animated-headlines.css" />
<link rel="stylesheet" type="text/css" href="ClientSide/css/plugins/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="ClientSide/css/plugins/jquery.mb.YTPlayer.min.css" />
<link rel="stylesheet" type="text/css" href="ClientSide/css/plugins/magnific-popup.css" />
<link rel="stylesheet" type="text/css" href="ClientSide/css/plugins/meanmenu.min.css" />
<link rel="stylesheet" type="text/css" href="ClientSide/css/plugins/nivo-slider.css" />
<link rel="stylesheet" type="text/css" href="ClientSide/css/plugins/slick.css" />
<link rel="stylesheet" type="text/css" href="ClientSide/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="ClientSide/css/core.css" />
<link rel="stylesheet" type="text/css" href="ClientSide/css/default.css" />
<link rel="stylesheet" type="text/css" href="ClientSide/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="ClientSide/css/materialdesignicons.min.css" />
<link rel="stylesheet" type="text/css" href="ClientSide/css/responsive.css" />
<link rel="stylesheet" type="text/css" href="ClientSide/css/style-customizer.css" />
<!-- customizer style css -->
<link rel="stylesheet" type="text/css" href="ClientSide/css/style-customizer.css" />
<link href="#" data-style="styles" rel="stylesheet" />
<script type="text/javascript" src="ClientSide/js/vendor/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="ClientSide/js/vendor/modernizr-2.8.3.min.js"></script>
<script type="text/javascript" src="ClientSide/js/ajax-mail.js"></script>
<script type="text/javascript" src="ClientSide/js/animated-headlines.js"></script>
<script type="text/javascript" src="ClientSide/js/bootstrap.min.js"></script>
<script type="text/javascript" src="ClientSide/js/isotope.pkgd.min.js"></script>
<script type="text/javascript" src="ClientSide/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="ClientSide/js/jquery.collapse.js"></script>
<script type="text/javascript" src="ClientSide/js/jquery.counterup.min.js"></script>
<script type="text/javascript" src="ClientSide/js/jquery.magnific-popup.js"></script>
<script type="text/javascript" src="ClientSide/js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="ClientSide/js/jssor.slider-22.2.16.debug.js"></script>
<script type="text/javascript" src="ClientSide/js/jssor.slider-22.2.16.min.js"></script>
<script type="text/javascript" src="ClientSide/js/jssor.slider-22.2.16.mini.js"></script>
<script type="text/javascript" src="ClientSide/js/main.js"></script>
<script type="text/javascript" src="ClientSide/js/map.js"></script>
<script type="text/javascript" src="ClientSide/js/plugins.js"></script>
<script type="text/javascript" src="ClientSide/js/style-customizer.js"></script>
<script type="text/javascript" src="ClientSide/js/waypoints.min.js"></script>
<!-- Modernizr JS -->
<script src="ClientSide/js/vendor/modernizr-2.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
var jssor_1_options = {
$AutoPlay: true,
$SlideDuration: 800,
$SlideEasing: $Jease$.$OutQuint,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*responsive code begin*/
/*remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 1920);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
/*responsive code end*/
});
</script>
<style>
/* jssor slider loading skin oval css */
.jssorl-oval img {
animation-name: jssorl-oval;
animation-duration: 1.2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes jssorl-oval {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* jssor slider bullet navigator skin 05 css */
/*
.jssorb05 div (normal)
.jssorb05 div:hover (normal mouseover)
.jssorb05 .av (active)
.jssorb05 .av:hover (active mouseover)
.jssorb05 .dn (mousedown)
*/
.jssorb05 {
position: absolute;
}
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
position: absolute;
/* size of bullet elment */
width: 16px;
height: 16px;
background: url('img/b05.png') no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb05 div { background-position: -7px -7px; }
.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
.jssorb05 .av { background-position: -67px -7px; }
.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }
/* jssor slider arrow navigator skin 22 css */
/*
.jssora22l (normal)
.jssora22r (normal)
.jssora22l:hover (normal mouseover)
.jssora22r:hover (normal mouseover)
.jssora22l.jssora22ldn (mousedown)
.jssora22r.jssora22rdn (mousedown)
.jssora22l.jssora22lds (disabled)
.jssora22r.jssora22rds (disabled)
*/
.jssora22l, .jssora22r {
display: block;
position: absolute;
/* size of arrow element */
width: 40px;
height: 58px;
cursor: pointer;
background: url('img/a22.png') center center no-repeat;
overflow: hidden;
}
.jssora22l { background-position: -10px -31px; }
.jssora22r { background-position: -70px -31px; }
.jssora22l:hover { background-position: -130px -31px; }
.jssora22r:hover { background-position: -190px -31px; }
.jssora22l.jssora22ldn { background-position: -250px -31px; }
.jssora22r.jssora22rdn { background-position: -310px -31px; }
.jssora22l.jssora22lds { background-position: -10px -31px; opacity: .3; pointer-events: none; }
.jssora22r.jssora22rds { background-position: -70px -31px; opacity: .3; pointer-events: none; }
</style>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px;
width: 1500px; height: 400px; overflow: hidden; visibility: hidden;">
<!-- Loading Screen -->
<div data-u="loading" class="jssorl-oval" style="position: absolute; top: 0px; left: 0px;
text-align: center; background-color: rgba(0,0,0,0.7);">
<img style="margin-top: -19.0px; position: relative; top: 50%; width: 38px; height: 38px;"
src="img/oval.svg" />
</div>
<div id="slider" runat="server" data-u="slides" style="cursor: default; position: relative;
top: 0px; left: 0px; width: 1500px; height: 400px; overflow: hidden;">
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb05" style="bottom: 16px; right: 16px;" data-autocenter="1">
<!-- bullet navigator item prototype -->
<div data-u="prototype" style="width: 16px; height: 16px;">
</div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora22l" style="top: 0px; left: 8px; width: 40px;
height: 58px;" data-autocenter="2"></span><span data-u="arrowright" class="jssora22r"
style="top: 0px; right: 8px; width: 40px; height: 58px;" data-autocenter="2">
</span>
</div>
</asp:Content>
protected void Page_Load(object sender, EventArgs e)
{
getSlider();
}
public void getSlider()
{
clsSlider objSlider = new clsSlider(true);
objSlider.SelectAll();
string str = string.Empty;
int i = 0;
for (i = 0; i < objSlider.ListclsSlider.Count; i++)
{
str += @" <div>
<img data-u='image' src='../images/Slider/" + objSlider.ListclsSlider[i].SliderID + objSlider.ListclsSlider[i].ImgExtension + @"' />
</div>";
}
slider.InnerHtml = str;
}
}
