Dear Support,
Im currently having a sticky Nav Menu for mobile on my site.
It works great on safari and chrome for mobile.
When i scroll down the menu bar on top stays fixed to the top.
But when I open my site from a link on Facebook and try to scroll down, the sticky menu bar goes half above the screen and it looks horrible.
Similarly, on Firefox for mobile, while scrolling a page the menu bar disappears but when the scrolling is stopped it appears again. Its such a weird behaviour.
Here’s a sample link from my site:
http://smokingcessationformula.com/cbq-method-quit-smoking-cognitive-behavioural-quitting/
Also, below is the code i currently have that is responsible for making the mobile menu sticky. I believe this need to be fixed so that all browsers will work properly.
Thanks in Advance.
Regards
/*mobile sticky menu bar */
@media (max-width: 979px) {
.x-navbar.x-navbar-fixed-top {
position: fixed;
z-index: 2000;
top: 0;
width: 100%;
}
}
.touchevents .x-navbar {
overflow:hidden;
-webkit-overflow-scrolling:touch;
}
@media (max-width: 979px) {
body .x-navbar-wrap {
min-height: 68px;
}
}
@media (max-width: 979px) {
.x-navbar {
position: fixed;
z-index: 2000;
top: 0;
width: 100%;
opacity: .98;
}
.masthead {
min-height: 68px;
}
}