Hello. I received the below response from @Lely a month ago. I gave up on it, but I’m trying again with a new project. I still can’t get the navbar at the top to be transparent. I have added the JS and I do not have the .home .x-navbar.x-navbar-fixed-top{background: #fff;} . It still looks like this at the top:
What do I need to adjust to get the navbar transparent at the top?
–Previous response from Lely
Please try to remove the following custom CSS:
.home .x-navbar.x-navbar-fixed-top {
background: #fff;
}
Go to Theme Options > Header > Navbar > Navbar Position: Choose Fixed Top. This settings will make it fixed on top on scroll.
Add this custom JS on Theme Options > Global JS.
(function($){
var H = $(window).height();
$(window).scroll(function() {
if ( $(this).scrollTop() >= 300 ) {
$('.home .x-navbar').css({ 'background-color': '#ffffff'});
$('.home .x-navbar .desktop .x-nav > li > a').css({ 'color': 'red'});
$('.home .x-navbar .x-brand img').attr('src','//jadoreweddingsalgarve.com/wp-content/uploads/2018/03/wine.png');
} else {
$('.home .x-navbar').css({ 'background-color': 'transparent'});
$('.home .x-navbar .desktop .x-nav > li > a').css({ 'color': 'green'});
$('.home .x-navbar .x-brand img').attr('src','//jadoreweddingsalgarve.com/wp-content/uploads/2018/03/logo2.png');
}
});
})(jQuery);
1.) On this line of code if ( $(this).scrollTop() >= 300 ) { change 300 to your preferred scroll value where you want the changes to happen.
2.) This line $(’.home .x-navbar .x-brand img’).attr(‘src’,’//jadoreweddingsalgarve.com/wp-content/uploads/2018/03/wine.png’); change the source of your logo image. Change to your preferred image URL. I have added that because your default image is white. On scroll, once the background of the menu is white, default logo is not visible. Set another image that is visible.
3.) This line $(’.home .x-navbar .desktop .x-nav > li > a’).css({ ‘color’: ‘red’}); changes the color if your link after scroll. Change to your preferred color.
4.) The code inside the else statement is the value you go back to when we go back to scroll top. Change those values accordingly.
–