How to make a Transparent Sticky Header in WordPress with Elementor FREE

1. Copy the code and add it in an HTML widget

<style>
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.stickyHeader{
background-color: rgba(256, 256, 256, 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>

2. Add this CSS Class to the Header Section: clearHeader

3. That’s it! Here are the colors I used in the video HEX Color:

• Normal/Solid Color: #000000
• Transparent (Opacity 60%): #00000099

Transparent RGB Color:

• Normal/Solid Color: rgb(0, 0, 0)
• Transparent (Opacity 80%): rgba(0, 0, 0, 0.6)