I added this class ".sticky" by javascript to the nav but sticky menu not working correctly.
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
-webkit-transform: none;
transform: none;
}
javascript code
//sticky menu
var stickyNavTop = $('.main-navbar').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.main-navbar').addClass('sticky');
} else {
$('.main-navbar').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
can you please check the page http://www.chainreaction.ae/alayam/
thank you
Add this css:
.scotch-panel-canvas {
transform: none !important;
-ms-transform: none !important;
-moz-transform: none !important;
-webkit-transform: none !important;
}
Please remove inline styles from the scotch-panel-canvas
div then it works fine...
remove this style: style="position: relative; height: 100%; width: 100%; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden; transition: all 300ms ease;"
i don't how this inline css coming from but you should remove this. I think this style coming from some jquery. When u remove this code it works fine...
and also increase the z-index
value
Using position: fixed;
and top: 0px;
should be enough.
Please see this link http://jsfiddle.net/luckmattos/yp8HK/1/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.