Sticky headers are all the rage right now. You don't need to be a superstar coder or hire one to get it for your site. With your default EvolutionX theme we are going to show you how.
Now let's see how to add it.
Step 1: Decide what you want to stick...the first row or the second row.
👍 Choose the headersection-1, headersection-2, or headersection-3 and then change this in both the css and js
Step 2: Copy & Paste the below into Appearances >> Theme options >> Footer Block
<script>
// Add a Sticky header on Scroll
// scroll event
window.onscroll = function() {stickyMenu()};
var menubar = document.querySelector('.headersection-3'),
menubarHeader = document.querySelector('.header-full');
//
function stickyMenu() {
if (document.body.classList.contains('ex-404') && menubar.classList.contains('container')) { return; }
// change the 65 to the height of the rows above the sticky row
if (window.pageYOffset >= 65) {
menubar.classList.add("menubarStick");
menubarHeader.classList.add("menubarHeader");
} else {
menubar.classList.remove("menubarStick");
menubarHeader.classList.remove("menubarHeader");
}
}
</script>
Step 3: Copy & Paste the below into the CSS block
/* Start of add Sticky header EvoX */
@media only screen and (min-height: 768px) {
.menubarStick {
position: fixed !important;
top: 0;
width: 100%;
z-index: 15;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.headersection-3.menubarStick > .row-2 {
max-width: 1450px;
margin: 0 auto;
}
/* change me to the height of the sticky row */
.menubarHeader {
padding-top:40px;
}
}
/* end of add Sticky header EvoX */
Step 4: Change the background color to suit your theme
Simply find what your header background color is and then add it to the CSS block.
Find your header background color in the Theme Options and then update the CSS block
Update the below line
🎉 That's it, now update and test your storefront
____________________________________________
Make sure the header sticks at the right time and place.
If your header is jumping (See below) and not sticking at the right time.
BAD - it's jumping and not smooth
GOOD - Oooh, that's nice
To fix the above you just need to add the correct height of the top row of your header.
Find the height of your top row.
Now add that height to the Javascript code.
🎉 That's it, now update and test your storefront