Add A Glass Effect To Your Header On Elementor

Share on facebook
Facebook
Share on twitter
Twitter
Share on reddit
Reddit
Share on whatsapp
WhatsApp

Create Your Glass Effect Here

Elementor Pro

				
					selector{
	position: fixed;
	width: 100%;
	background: rgba( 255, 255, 255, 0.10 );
backdrop-filter: blur( 2.5px );
-webkit-backdrop-filter: blur( 2.5px );
}
				
			

Free Version Of Elementor

1. Add this css class to header section css classes

				
					sticky-header
				
			

2. Add this to your css code in the customizer

				
					
.sticky-header{
	position: fixed;
	width: 100%;
	background: rgba( 255, 255, 255, 0.10 );
backdrop-filter: blur( 2.5px );
-webkit-backdrop-filter: blur( 2.5px );
}
				
			
Subscribe
Notify of
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Zahed
1 year ago

Hi

Thanks for your tutorail
But when I have done it perfectly my mini cart box gors under the pages I have done everything but I could not solve It do you have any ideas?
With Best Regards

More to explorer

Elementor GSAP Text Split Reveal

https://youtu.be/ml7Mf5MRgTw Step 1 Add the class name text_reveal to the headline element Make sure the headline element HTML Tag is set to

2
0
Would love your thoughts, please comment.x
()
x

45 Minute Wordpress Support

Get your Wordpress questions answered and your Wordpress issues resolved.