+- WallBB Forums (https://wallbb.co.uk/forums)
+-- Forum: Theme Section (https://wallbb.co.uk/forums/forumdisplay.php?fid=5)
+--- Forum: Theme Documentation (https://wallbb.co.uk/forums/forumdisplay.php?fid=9)
+--- Thread: Go Dark Theme - How to add onscroll sticky header in GoDark MyBB theme (/showthread.php?tid=329)
How to add onscroll sticky header in GoDark MyBB theme - WallBB - 03-15-2020
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
