How to Create Transparent Header with Elementor free version

If you are using WordPress template and love Elementor and you need/want to have header transparent you can read and try this tutorial. So, Elementor free version don't have this option but i will show you in future minutes how to do it.

First you need to install plugin Elementor – Header, Footer & Blocks Template and enable it (don't forget to have Elementor free version installed and enabled).

Go to Appearance and from this menu choose Header Footer

Save and after click on Edit with Elementor button.

Select your structure, example  25%/75%.

in first box add image or site logo addon

in second box add menu.

Edit section and go to style tab: here you can choose background color. Now choose tab advanced and scroll down to CSS Classes , here add the example transparenth

save

Now go to your css file and add


.elementor-section-wrap .transparenth{
    z-index:999;
    transition: all .4s;
}
@media (min-width: 1024px) {
.elementor-section-wrap .transparenth {
    position:absolute;
    top:30px;
    background:transparent !important;
    border-bottom:0px solid rgba(255, 255, 255, 0.10);
    transition: all .4s;
    left:0;
    width:100%;
}
}

How to Create Transparent Header with Elementor free version video tutorial

Go Back