Introducing Peach MyBB Theme - Absolute Delight Check details here
Go Dark Theme -  How to add onscroll sticky header in GoDark MyBB theme
#1
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 Smile
Reply


Messages In This Thread
How to add onscroll sticky header in GoDark MyBB theme - by WallBB - 03-15-2020, 08:08 PM



Users browsing this thread: 2 Guest(s)