Autohide sticky menu - how to?

vergily

Good day everybody.
I'd like ask about sticky menu. How to make autohide sticky menu on small screen devices?
I mean the menu is fixed on top of the screen, but when you scroll down the menu disappears and when you scroll up the menu appears again.

teitbite

vergily Hi. Please tell me the url to the example page where menu acts like that on Your site so I'll check what code is needed.

vergily

Like this https://creatus.io/

teitbite

vergily Hi. I'm afraid I do not understand. Is this an example of how You want it? I've asked for an url to Your site so I will be able to check what style is needed to make it like that.

vergily

Ops))
my testing site is http://vergily.ru
I'd like autohiding for this section
<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav">...</nav>

padysufa

Mr.Vergily BTW which types of solutions you have tried to solve your issue till now?
[https://www.hixol.com/logo-design-services-islamabad]

vergily

I tried two solutions.
1. https://github.com/istvan-ujjmeszaros/bootstrap-autohidingnavbar but It doesn't work with data-spy = affix
2. I used a custom script

<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;

  if (prevScrollpos > currentScrollPos) {
    document.getElementById("t3-mainnav").style.top = "0";
   
  } else {
    document.getElementById("t3-mainnav").style.top = "-52px";

  }
  prevScrollpos = currentScrollPos;
   if (currentScrollPos > 0) {document.getElementById("t3-header").style.marginBottom = "52px";}
   if (currentScrollPos <= 0) document.getElementById("t3-header").style.marginBottom = "0";
}

</script>

But problem is the page twitches when menu appears. This happens when <nav> element switch position from fixed to relative. I tried to compensate it with .style.marginBottom for next element in DOM. But unsuccessful.