Transparent navbar Firefox

[NickMacedo]

Hello, I am using the below code to make my navbar transparent as it lays over various revolution sliders on different pages of my site. It works in Safari and Chrome but not in Firefox. In firefox, the navbars background is white. Can you please help me fix it?

Code:
.x-logobar {
display: none;
}

.x-navbar {
background-color: transparent !important;
border: 0;
}
.x-logobar{
background-color: transparent !important;
}

.masthead {
height:0px;
}

.x-navbar .desktop .x-nav li>a>span:after {
display: none;
}

[jumar]

Hello @NickMacedo,

Thanks for writing in!

Please update your CSS code.

.x-logobar {
    display: none;
}
.x-navbar {
    background-color: rgba(255,255,255,0.66) !important;
    border: 0;
}
.x-logobar{
    background-color: rgba(255,255,255,0.66) !important;
}
.masthead {
    height: 0;
}
.x-navbar .desktop .x-nav li>a>span:after {
    display: none;
}

Hope it helps.

[NickMacedo]

Unfortunately that did not work.

This code actually made the logobar and navbar a transparent white. So I altered the code you provided to whats below. It worked on Safari and Chrome. The navbar and logobar are fully transparent which is what I want. Completely invisible like the attached image. Firefox still has a solid white background like the second attached image.

Code I tried:
.x-logobar {
display: none;
}
.x-navbar {
background-color: transparent !important;
border: 0;
}
.x-logobar{
background-color: transparent !important;
}
.masthead {
height: 0;
}
.x-navbar .desktop .x-nav li>a>span:after {
display: none;
}

[Joao]

Hi There,

Please clean your browser cache and test it again.

In case it doesnt work, work please provide your URL.

Thanks

[NickMacedo]

Hi, cleared the cache but still nothing.

[thai]

Hi There,

Please find this custom CSS:

.masthead {
height: 0;
}

And change to this:

.home .masthead {
    position: absolute;
    width: 100%;
}

Let us know how it goes!

[NickMacedo]

that worked, thanks for your help!

[thai]

You’re welcome.