Learn the easiest way to change the header color and logo on scroll in WordPress using Elementor Free. This step-by-step video guide shows you how to update your header logo or background color as users scroll down the page. No additional plugins are required – this technique is simple, free, and perfect for beginners. Watch until the end to see how to add a stylish transparent header for a modern touch.
Written guide:
After you create a header section as shown in the video (linked below), do the following:
Step 1. Create the headers and add an HTML widget
Check the video that’s below on how to do this.
The two classes you need to add are: headerSection hiddenHeader
Step 2: Copy the following code into the HTML widget
<style>
.hiddenHeader {
display: none;
}
.stickyHeader {
position: fixed;
width: 100%;
top: 0;
}
.headerSection.stickyHeader {
background-color: rgba(255, 255, 255, 1);
border-bottom: 1px solid #EEE;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
// Caches a jQuery object containing the header element
var header = $(".hiddenHeader");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
header.removeClass('hiddenHeader').addClass("stickyHeader");
} else {
header.removeClass("stickyHeader").addClass("hiddenHeader");
}
});
});
</script>