Written guide:
After you create a header section as shown in the video (linked below), do the following:
1. Copy the code and add it in an HTML widget in Elementor:
<style>
html, body {
max-width: 100%;
overflow-x: hidden;
}
.stickyHeader {
background-color: rgba(0, 71, 206, 0.8);
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() {
// attaches 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: #0047CE
Transparent (Opacity 80%): #0047CECC
Transparent RGB Color:
Normal/Solid Color: rgb(0, 71, 206)
Transparent (Opacity 80%): rgba(0, 71, 206, 0.8)