Go Dark Theme - How to add onscroll sticky header in GoDark MyBB theme

[WallBB]

This tutorial will allow you to add onscroll sticky header in GoDark MyBB theme. Follow these steps to add the onscroll sticky header :-

1. Go to Admin CP > Themes > GoDark Theme > nav.css > Edit in Advanced Mode
2. Add the below code at the bottom of nav.css

Code:

.touchX {
  position: fixed;
  width: 100%
  top: 0;
}

3. Now add the below code in footer template i.e Admin CP > Themes > Templates and Styles > GoDark Templates > Footer Templates > footer

Code:

<script>
window.onscroll = function() {myFunction()};

var header = document.getElementById("stickynav");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("touchX");
  } else {
    header.classList.remove("touchX");
  }
}
</script>

4. Finally go to header template and replace <nav> with

Code:

<nav id="stickynav">

This will allow you to add a beautiful onscroll sticky header to GoDark MyBB theme.

Enjoy