Hi
I’m trying with the help of some code I found here to get my header to turn transparent only at the top of the page in desktop view, but I can’t make it work. The header stays white at the top of the page. What’s wrong?
Here’s the code:
.x-navbar {
border-bottom: none;
background-color: rgba(255, 255, 255, 0.9 );
max-height: 100px;
}
.x-navbar-solid {
background-color: #fff !important;
}
/.x-navbar .sub-menu {
background-color: #fafafa;
}/
body.x-navbar-fixed-top-active .x-navbar-wrap {
height: auto;
}
.x-navbar-wrap {
height: auto !important;
}
.x-btn-navbar.collapsed {
color: black;
}
.x-btn-navbar.collapsed:hover {
color: grey;
}
.x-btn-navbar {
color: black;
}
.x-btn-navbar:hover {
color: grey;
}
.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
//mobile menu color
.x-nav-wrap.mobile.collapse.in {
display: block;
background-color: rgba(255,255,255, 0.9);
padding-left: 20px;
}
@media (max-width: 979px) {
body .x-navbar {
height:auto !important;
}
.x-navbar-inner {
background-color: #fff;
}
}
.x-navbar .mobile .x-nav ul li a span {
color: #000;
}
.x-navbar .mobile .x-nav ul li a {
border-color: #000;
}
Regards
Elias