Transparent header in desktop view

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

Hi Elias,

Thank you for writing in, please remove that entire custom CSS, that seems too much for the effect that you’re after. I see you have a license for both X and PRO, is the site in question using PRO? If so,

You can achieve that in Pro without using a custom CSS. For this you need two bars, the first bar serves as your static top navbar (with transparent background), while the second bar is the fixed top navbar (with solid background).

To do this you need to turn on the second bar’s sticky bar option, and set it as initially hidden so both bars wont show up on the same time. (https://prnt.sc/gbgh3q)

From there you can style your Bars and its content differently.

If that did not work or the site is in X, please provide us the site URL and login credentials in a secure note so we can take a closer look.

Cheers!

Thank you for your fast reply.
For that specific site I’m using X. I have written a secure note to you.

Thank you!

Hi Elias,

It says wrong password when I tried to login

FEL: Lösenordet du angav för användarnamnet Xtheme är felaktigt. Glömt lösenordet?

Sorry!

Should work now.

Hi Elias,

There’s this settings on Theme Options.

Although, it will work on all views and not on desktop only. So you use this CSS instead:

@media(min-width:981px){
.admin-bar .x-navbar {
    top: 32px;
}
.x-navbar {
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    background: rgba(255,255,255,0.2 ); /*Maximum value for the last part the opacity is 1 which means white. 0 means transparent. Making it 0 will make black menu links not visible on pages where the content behind it is black too.*/
    box-shadow: none;
}
}

Hope this helps.

Thank you!

But that code doesn’t make the header background color solid when I’m scrolling down.

Hi Elias,

Please update to this one:

@media(min-width:981px){
.admin-bar .x-navbar {
    top: 32px;
}
.x-navbar {
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    background: rgba(255,255,255,0.2 ); /*Maximum value for the last part the opacity is 1 which means white. 0 means transparent. Making it 0 will make black menu links not visible on pages where the content behind it is black too.*/
    box-shadow: none;
}
.x-navbar.x-navbar-fixed-top{
   background: rgba(255,255,255,1);
}

}

That did it! Thank you!

Is it hard to make it get transparent again after you have scrolled down and up to the top again?

Hi Elias,

Please add this code in X > Theme Options > JS:

(function($){

	$(window).scroll(function(){

		if( $(this).scrollTop() == 0 ) {
			$('.x-navbar').removeClass('x-navbar-fixed-top');
		}

	});

})(jQuery);

Hope this helps.

Couldn’t get it to work. The header stays solid white.

Hi Elias,

Please update the code to:

jQuery(function($){

	$(window).scroll(function(){

		if( $(this).scrollTop() == 0 ) {
			$('.x-navbar').removeClass('x-navbar-fixed-top');
		}

	});

} );  

Hope this helps.

Worked like a charm.

Thank you so much for your help!

You’re most welcome, Elias.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.