CLICK TO WATCH LATEST DIGITAL MARKETING & WEB DESIGN TUTORIALS ON DIGITAL RNK YOUTUBE CHANNEL! MAKE SURE TO SUBSCRIBE FOR MORE USEFUL VIDEO UPDATES!….
Digitalrnk Logo

Resources

Transparent Sticky Header Custom CSS Code

Instructions

Watch the video tutorial and follow all the steps. Check out my example versions for a white menu or a dark menu.

Make sure you Elementor Pro installed on your website.
Make sure your logo doesn’t have any width settings
Make sure your header isn’t higher as 90px
Make sure your header has a minimum height of 90px
Add a css class to your logo. Change the pixels to fit your logo design.

The custom css code

Put this part on your main section

selector.elementor-sticky–effects{
background-color: rgba(0,0,0,0.5)!important
}

selector{
transition: background-color 1s ease !important;
}

selector.elementor-sticky–effects >.elementor-container{
min-height: 70px;
}

selector > .elementor-container{
transition: min-height 1s ease !important;
}

Put this part on your logo image (don’t forget to give the logo a class of “logo”)

.logo img {
max-width: 140px;
height: auto;
transition: all 0.5s ease;
}

.elementor-sticky–effects .logo img {
max-width: 120px;
height: auto;
}

Don’t just copy and paste the code on your header. It only works if you follow the steps in the tutorial.

How to Create a Transparent Sticky Header in WordPress with Elementor

Scroll to Top