Introduction
In this blog post, I’m going to help you make your website header sticky when visitors search through your website. Sticky header makes your website look more professional, eye-catching and attractive. Furthermore, it helps to keep your visitors longer on your website by capturing their attention. We’re going to log in to our wordpress dashboard and install the necessary plugin – ”Sticky Header Effects For Elementor.” Afterwards, you won’t have any issues with making your header sticky. Just follow this tutorial step by step.
Install Sticky Header Effects Plugin
Log in to your wordpress dashboard. On the left-hand side, select plugins and click on ”add new plugin.” Search for ”Sticky Header Effects For Elementor.” Install and activate the mentioned plugin. We’re going to need both ”Sticky Header Effects For Elementor” plugin and ”Elementor Header & Footer Builder” plugin where we created our custom header design previously (Read this blog post if you don’t have your custom header designed and ready: https://tomswebsitedesign.com/?p=1113).
Sticky Header On Entire Website
As we have our foundations ready, we can start making our header sticky. Come to appearance and click on ”Elementor Header & Footer Builder.” Find your custom created header. Additionally, click on ”edit with elementor” so we can add sticky header effects to it. You will be redirected to the page where you can edit your header.
1st phase – I’m going to show you how to make your header sticky on entire website when scrolling up and down. Click on 6 dots to edit the container where your header is placed. Make sure to select ”Advanced” settings because that is where Sticky Header Effects are ready for use. Scroll down until you find them and turn ”Enable” button on. Also, you can increase the distance size or leave it at 0 as it is. Leave it at 0 if you want your header to be sticky through entire scrolling on your page (i.e., sticky header is always visible). Comparatively, if you increase the scroll distance to e.g. 400 pixels, your sticky header is going to show up after you scroll 400 pixels down on your page. Once you’ve chosen your preferences, click on ”Update.” Then come to your website page, refresh it and view your changes. I’ve chosen the scroll distance at 0, so as you can see-sticky header is visible throughout entire website.
Sticky Header Only On Scroll Up
2nd phase – you can hide your sticky header when scrolling down on your page. That means that your sticky header is going to show up only when you scroll back up on your page. To accomplish that, you need to turn the button ”Hide header on scroll down” on. Consequently, you can also decide the scroll distance. Choose whether your sticky header is going to be hidden during the entire scrolling down on your page or after certain scroll down distance. In this example, I’m going to leave it at 0 as it is. Once again, update your changes. And as you can see on the video, sticky header is hidden during the entire scrolling down. It only shows up when scrolling back up.
Sticky & Transparent Header
3rd phase – we can change the background color of our sticky header and make it transparent. In that way, other elements on the page are visible through our sticky header. In order to do that, make your sticky header transparent by turning ”Transparent Header” button on. Afterwards, turn ”Background Color” button on. Choose your desired sticky header background color and underneath your chosen color – make it transparent by dragging the circle on the line to the left. Generally, if you leave it at black, your chosen background color is going to be at its darkest tone. Since we want it transparent, we need to drag the circle on the line to the left – closer to white. Closer the circle to the white color, more transparent background color of sticky header is going to be. Update your changed preferences and refresh your page to view your changes. As you can see, we’ve successfully made our header sticky & transparent and changed its background color.
Conclusion
In this blog post, you’ve learned how to make your website header sticky. Basically, you can decide between displaying sticky header through entire website or displaying sticky header only when scrolling up on your website. Additionally, you can decide to activate sticky header as soon as you start scrolling or after certain distance. Decide whether you want your header sticky & transparent with changed background color in order for elements on your website to be visible through smoothly. Appreciate your time reading this post and enjoy designing your own sticky header!
Leave a Reply