How To Hide Show Header On Scroll In Elementor – 7 Single Steps

How To Hide Show Header On Scroll In Elementor
Let’s face it. The real estate we have in common screens is not that big and we need to take full advantage of it so that our content isn’t blocked when our visitors scroll through the page
Share on facebook
Share on linkedin
Share on pinterest
Share on reddit

Our first tutorial for doing cool things on Elementor with the elements of your website that extend the functionality of the page builder was all about transparent sticky headers and this time, I’m back with another header effect that you’ll find to be pretty cool and easy to implement. It’s the hide show header on scroll effect that can help to provide a better user experience to the people visiting your website.

 

Let’s face it. The real estate we have in common screens is not that big and we need to take full advantage of it so that our content isn’t blocked when our visitors scroll through the page. Sometimes, we get fixated on having a big logo on the header for branding reasons and then we make this header sticky, causing an issue in our users’ experience for not having that much space left for them to see what’s important; the content on the page.

 

By building a header that hides when users scroll down and then shows when they scroll up, visitors can see all the sections and main content on our website as they browse through, making up for a great experience and once they’ve seen enough and decide to go up, the header with the menu is right there at their disposal.

 

Elementor’s Header Effects: There aren’t many options

Even though Elementor has some pretty powerful features that make building pages a breeze, when it comes to header design where you have different ways of display, it’s lacking options. Besides hiding and showing the header on scroll, other cool effects that you can implement on a header are making it sticky but shrinkable on scroll so that it doesn’t take too much space when users get past of the main section or having two different logos shown, one for the main section and one for scrolling like the Coffee With A Cop website. The issue is that with Elementor, other than using add-on, we don’t get header effects built into it.

 

Themes like OceanWP or Astra can provide us the options to enable these features with simple clicks but if you’re like me and use the Hello Elementor theme, you need to get hands-on with CSS and JavaScript code to make them happen. Don’t worry, the code will be included in this tutorial so you can just copy and paste. Are you ready?

 

Hide Show Header on Scroll Effect: Implementing it step by step

1. This effect is actually pretty easy and quick to implement. The first thing we need to do is go to into Theme Builder > Header and create a new header.

 

2. Once we’re there, we start building by adding a section and making it full width and stretched with the background color of your choosing.

 

elementor header effects

 

3. Next thing we’re going to do is add build our header layout like we want. For the purposes of this tutorial, I’m going to go simple and just add an inner section with two columns; logo on the left and nav menu on the right.

 

 

4. After we have this set up, we need to give the whole section an ID so both snippets can work. So, on section > Advanced, we add the ID. I’d recommend something simple and easy to remember like custom-heading or custom-navigation.

 

hide show header on scroll

 

5. Now, we’re onto the snippets. The first one is the CSS which is pretty simple, you add it on section > Advanced > Custom CSS. This is what you’re going to copy and paste:

#custom-header {

    top: 0;

    transition: top 0.3s;

    display: block;

    position: fixed;

}

 

6. Then, we add JavaScript that hides or shows the header based on where the user is scrolling to using the HTML inserted either above or below the inner section (doesn’t really make a difference). On that widget, we add this code:

 

<script>

var prevScrollpos = window.pageYOffset;

window.onscroll = function() {

var currentScrollPos = window.pageYOffset;

  if (prevScrollpos > currentScrollPos) {

    document.getElementById("custom-header").style.top = "0";

  } else {

    document.getElementById("custom-header").style.top = "-120px";

  }

  prevScrollpos = currentScrollPos;

}

</script>

 

*Important note: If you don’t know jack of JavaScript, you have to change the word that’s in between the parentheses after the document.getElementById to the Id you set to your header in step 4.

 

7. Publish it with the display conditions set to entire site or to the type of pages where you want to see the header in, and that’s it. You can look at your site and see how it disappears when you scroll down, but reappears once you scroll up.

 

 

Final words

Sticky headers make a website’s core functionalities more accessible by displaying them to you no matter where you are on a particular page. But a common mistake with them that actually damages the user’s experience is making them too large, either by making content too big or just adding too much of it, leaving too little room for the main content.

 

That’s not too say sticky headers are bad in and of itself because to put it in simple words, they make browsing your website easier, especially if yours has an extensive amount of content set in different categories.

 

In the end, it’s all a matter of personal preference. If you think the header being sticky is distracting users from the main content, you could workaround it using a solution like this.

Get an amazing elementor site today

Starting your business and need a website? Good, I can make one for you! Just click the link below and let me know what you need in the next page.

Leave a Reply

Your email address will not be published. Required fields are marked *

backgroundLayer 1

Home

The right clients, at the right price, anytime you want.

About

It takes 3 things for a program to create life-changing results.

Team

We have the skills you need to build a multi-million dollar business.

Contact

Helping coaches & thought-leaders all over the world.

You could use this for a mission statement or something else about your business that could really help people know more.

Navigation Menu

Newsletter (this is pretty important here!!)

Sign up to our newsletter

This guide is included in all template purchases, but you can get it here if that's what you only want