Making a website user-friendly and visually appealing are our foremost priorities in web design. A sticky header that hides when users scroll down is a popular trend and a valuable addition to providing a cleaner interface and improving the user experience.

In this tutorial, we’ll show you how to hide menu when scrolling in Elementor. You’ll not need the coding skills for that. We’ll provide you with the code you need to copy and paste according to the tutorial. So without further ado, let’s get into it.

What You Will Need for This Tutorial

To complete the tutorial successfully, you must have Elementor Pro. Because with the free version, you won’t be able to add custom code, which is a necessary step for this tutorial. So do check its pro version, it will save you a lot in sense time and effort.

If you want to become a professional WordPress designer or make a professional website then Elementor Pro is necessary to integrate the features that every modern website must have. Once you purchase and install it on your WordPress website, follow the below tutorial for making your website header sticky that hides when scrolling.

How To Hide Menu When Scrolling in Elementor?

Sticky header offer easy navigation and increased engagement on our website. However, it covers the ample area of the screen, which can be a distraction and annoying for the user, especially on smaller screens like mobile phones. That’s why making the header that hides when scrolling down and reappears when scrolling up is a great way to take advantage of the sticky header while avoiding a bad user experience.

Step 1: Create a Header With Elementor

The first step is very simple, you need to create a header for your web design as usual. The thing you need to keep in mind is it must be in one section or container. Otherwise, it will become difficult for you to make the two sections sticky together.

If you don’t want to apply it on mobile phones, create a separate section for it and from the advanced tab in the responsive feature, turn it off for desktops and tablets, so the effect will not be applied to mobile phones.

Step 2: Make the Header Sticky

Once you complete designing the header for your web design, you need to make it sticky from the advanced tab. Navigate to the advanced tab, tap on motion effects, and set the stick option to the “top”. For the motion offset, you can set it according to your theme or design preferences.

Step 3: Add CSS ID to Header Section

Now again, in the advanced tab, tap on the advanced section and add CSS ID to the header section. Write “sticky-header” as CSS ID according to the code provided in this article. Remember that CSS ID will vary according to the javascript you will use in custom code, so make sure it is accurate according to the code.

Step 4: Add Custom Code

After adding the CSS ID, you need to copy the JavaScript provided in this article and paste it into the Elementor custom code. Copy the code from this post, navigate to the dashboard of your WordPress website, hover on the Elementor, and from the left side menu, tap on “Custom Code”.

Select “Add New Code”, set the location to “-End”, and paste the code in the below code editor. You can adjust the “style. top” height according to your website header height or design preferences, in this case, it’s -80px. Now publish the code, and it will add it to the footer section of every page, and the code will work on the whole website.

<!-- Sticky Header -->
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("sticky-header").style.top = "0";
  } else {
    document.getElementById("sticky-header").style.top = "-80px";
  }
  prevScrollpos = currentScrollPos;
}
</script>

You can add custom CSS to control the header show and hide speed to make a smooth transition. Inspect the header by doing right click on it, find the correct CSS class for the header, and add the following code there:

all .5s ease!important;

Final Result

Conclusion

Implementing a sticky header that hides when scrolling is an effective way to improve the user experience, which will also have a strong effect on the SEO of your website. You can easily implement it using Elementor Pro and a little custom code.

Using the code we shared in this article, we will also solve your problem of coding skills. Start making your web design header sticky now, and if you face any problem during the process, comment below, and we’ll solve your query as soon as possible.