Hello folks,
as promised, I made another version of the template, but this time as a header template
Of course, there is something to consider here again: don’t set your header to sticky - then all the fun won’t work anymore That means, that you cannot change the background color and link colors etc. inside of the builder, but with some simple lines of custom CSS. All you need is to take a look at the code block inside the template. I put the script and style together in one code block and set a fixed scrolling value, to keep it as simple as possible.
There are two positions in the code that you have to change accordingly to the element height (#logo-wrapper, 200 in the example), that is above your navbar:
- if (window.scrollY > 200)
- .sticky #logo-wrapper { margin-top: -200px; }
Let me know if it works for you and have a nice rest of the weekend.