03-15-2020, 08:08 PM
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
3. Now add the below code in footer template i.e Admin CP > Themes > Templates and Styles > GoDark Templates > Footer Templates > footer
4. Finally go to header template and replace <nav> with
This will allow you to add a beautiful onscroll sticky header to GoDark MyBB theme.
Enjoy
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