Sticky menu

alirezamehrabun

Hi
How can i have sticky menu?

<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav">
to
<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav" data-spy="affix" data-offset-top="150">
and added the code in the file custom.css
.t3-mainnav.affix {
position: fixed;
top: 35px;
width: 100%;
z-index: 999;
}

Best Regards

alirezamehrabun

I fixed it!

Create this id:

#t4-header {
  background-color: #fff;
  position: sticky;
  width: 100%;
  display: flex;
  transition: top 0.3s;
}

and add this before </body>:

<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
 if (currentScrollPos<300) {
    document.getElementById("t4-header").style.top = "0";
    } else
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("t4-header").style.top = "0";
     
  } else {
    document.getElementById("t4-header").style.top = "-150px";
  }
  prevScrollpos = currentScrollPos;
}
</script>

if you need fix menu:

<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
 if (currentScrollPos<300) {
    document.getElementById("t4-header").style.top = "0";
    } else
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("t4-header").style.top = "0";
     
  } else {
    document.getElementById("t4-header").style.top = "0";
  }
  prevScrollpos = currentScrollPos;
}
</script>