All Collections
Advanced Design
Create a sticky header
Create a sticky header

Learn to create a sticky header for your website. Really cool and really easy.

Niall Diamond avatar
Written by Niall Diamond
Updated over a week ago

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

// 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) {
  } else {

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 {
/* 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 

Did this answer your question?