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
4 months 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

Add Icons To Your Elementor Form Fields With CSS

https://youtu.be/8qHZfpG2z-s Font Awesome fontawesome.com CSS Code /*placeholder spacing*/ selector form.elementor-form .elementor-field-group-email input, .elementor-field-group-name input, .elementor-field-group-phone input, .elementor-field-group-message textarea{ padding-left: 50px; } /*Icon

How To Create A Mobile App Menu On Elementor

https://youtu.be/7iJz3km-nwM Create Your Glass Effect Here: glassmorphism.com Mobile Section /*Mobile section*/ selector{ position: fixed; width: 100%; bottom: 0px; background: rgba( 0, 0,

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

45 Minute Wordpress Support

Get your Wordpress questions answered and your Wordpress issues resolved.