Easy step-by-step guide on how you can create a Sticky Transparent Header with Elementor Free in WordPress. To make this transparent sticky header, we won’t be using any additional plugins. Only the free version of Elementor and few simple lines of code that you can copy and paste as I show you in the video.
VIDEO: Watch this step-by-step tutorial to create a sticky transparent header with Elementor Free
Play Video
CODE: Copy as explained in the video to create a sticky transparent header for free
<style>
html, body {
max-width: 100%;
overflow-x: hidden;
}
.stickyHeader{
background-color: rgba(0, 71, 206, 0.8) !important;
position: fixed;
width: 100%;
top: 0;
transition: all 0.3s ease-in-out;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
//caches a jQuery object containing the header element
var header = $(".clearHeader");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
header.removeClass('clearHeader').addClass("stickyHeader");
} else {
header.removeClass("stickyHeader").addClass('clearHeader');
}
});
});
</script>
