Transparent Navbar on top but scroll down to black background

Support
#1

Hi,

My navbar is now transparent on top but when it scrolls down, it remains transparent. How do I turn it to black?

Also, there are some weird vertical lines beside the nav bar text links and blue horizontal lines below the nav bar text links which I would like to remove. How do I remove these lines?

Thanks!!

#2

Hi There,

Please find this custom JS:

jQuery( function($){
$(window).scroll( function() {
if( $(this).scrollTop() > 10 ) {
$('.home .x-navbar').css({ backgroundColor : 'black' });
} else {
$('.home .x-navbar').css({ backgroundColor : 'transparent' });
}
} );
} );
jQuery( function($){
$(window).scroll( function() {
if( $(this).scrollTop() > 10 ) {
$('.home .x-navbar').css({ backgroundColor : 'transparent' });
$('.home .desktop .sub-menu').css({ backgroundColor : 'black' });
} else {
$('.home .x-navbar').css({ backgroundColor : 'transparent' });
$('.home .desktop .sub-menu').css({ backgroundColor : 'black' });
}
} );
} );

And change to this:

jQuery( function($){
	$(window).scroll( function() {

	if( $(this).scrollTop() > 10 ) {
		$('.home .x-navbar').css({ backgroundColor : 'black !important;' });
		$('.home .desktop .sub-menu').css({ backgroundColor : 'black !important;' });
	} else {
		$('.home .x-navbar').css({ backgroundColor : 'transparent !important;' });
		$('.home .desktop .sub-menu').css({ backgroundColor : 'black !important;' });
	}

	});
});

Then find this custom CSS:

body .x-navbar {
    background-color: transparent !important;
    border: 0;
    box-shadow: none;
    position: fixed;
    width: 100%;
}

Also change it to this:

body .x-navbar {
    border: 0;
    box-shadow: none;
    position: fixed;
    width: 100%;
}

After that find and remove these custom CSS codes as well:

.home .x-navbar.x-navbar-fixed-top {
    background-color: transparent !important;
}
.home .x-navbar {
    background: transparent !important;
}

To remove the lines, please add this custom CSS:

.x-navbar .desktop .x-nav>li>a {
    border: none !important;
}

Hope it helps :slight_smile:

#3

Thanks! Most of it helped.

However, the nav bar remains transparent on scrolling down, rather than turning to a black background.

Although the vertical lines have been removed, the blue horizontal lines below the links remain.

#4

Hi There,

Would you mind providing us with your admin account so we can take a closer look?

Thank you.

#5

Hi Thai,

I’m still facing the problem of the home page not having a black background on the navbar and submenu on scroll down. It seems that the code works on other pages but not on the home page, which is strange.

#6

Hi Lionel,

Next time, you should your credentials to the Secure Note instead of the Private Message. It would be easier for other staffs to keep track the case.

For your issue, I’ve removed this custom CSS and everything is working fine now:

.home .x-navbar.x-navbar-fixed-top {
   background-color:transparent !important;
}

Cheers!

#7

Perfect! Thank you so much for your help!

#8

You’re welcome :slight_smile:

#9

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