How to Create Sticky transparent Header in WordPress with Elementor

 

 

Code snippet for making Sticky Header

<style>
.elementor .elementor-element.sticky{
    background: #FFFFFF;
    padding-top: 11px;
    padding-bottom: 11px;
    box-shadow: 0 0 30px 0 rgb(0 0 0 / 20%);
    position: fixed;
    width: 100%;
    top: 0;
    transition: all 0.3s ease-in-out;
}
.admin-bar .elementor .elementor-element.sticky{
    top: 32px;
}
.elementor .sticky .elementor-element .elementskit-navbar-nav > li > a, .elementor .sticky .elementor-element .elementor-social-icon i, .elementor .sticky .elementor-element .elementskit-menu-hamburger > .ekit-menu-icon{
    color: #000000;
    transition: all 0.3s ease-in-out;
}
.ekit-template-content-header .elementor-widget-image, .elementor-location-header .elementor-widget-image{
    margin-bottom: 0;
}
.ekit-template-content-header .sticky .elementor-widget-image, .elementor-location-header .sticky .elementor-widget-image{
    transform: scale(0.9);
    height: auto;
    transform-origin: left;
    transition: transform 0.3s ease-in-out;
}
.logo-2{
    height: 0;
    overflow: hidden;
}
.sticky .logo-1{
    display: none;
}
@media only screen and (max-width: 1024px) {
.admin-bar .elementskit-navbar-nav-default.elementskit-menu-offcanvas-elements{
    top: 32px;
}
}
@media only screen and (max-width: 782px) {
.admin-bar .elementor .elementor-element.sticky, .admin-bar .elementskit-navbar-nav-default.elementskit-menu-offcanvas-elements{
    top: 46px;
}
}
@media only screen and (max-width: 600px) {
.admin-bar .elementor .elementor-element.sticky, .admin-bar .elementskit-navbar-nav-default.elementskit-menu-offcanvas-elements{
    top: 0;
}
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
(function($){
$(document).ready(function(){
	    
$(window).on('load scroll', function(){
	var scroll = 100,
	sticky = $('.ekit-template-content-header, .elementor-location-header').find('.elementor-section')

	if ($(window).scrollTop() >= scroll) sticky.addClass('sticky')
	else sticky.removeClass('sticky')
})
		
})
}(jQuery))
</script>

4 thoughts on “How to Create Sticky transparent Header in WordPress with Elementor”

Leave a Comment

Your email address will not be published. Required fields are marked *