Docs

[rickitambo]

I have setup a fading navbar effect following this post https://community.theme.co//forums/topic/navbar-change/#post-207518, which I have seen many times been repeated in this forum. Works like a charm!

in Custom Java Script:

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
        navbar = $('.x-navbar');

    if (scrollPos > 1000) {
      navbar.addClass('alt-color');
    } else {
      navbar.removeClass('alt-color');
    }
  });
});

in Custom CSS

.x-navbar {
    transition: 0.2s all linear;
}

.x-navbar.alt-color {
    background-color: #ff0000;
}

But I also want to change the Navbar Font color on scroll. I have found solutions doing it with a seperate script. Is there a way to combine it with the solution above?

Thanks for your help!

[Joao]

Hi there,

Please try this combination instead.

Javascript:

jQuery(document).ready(function($){
  $('.home .x-navbar-fixed-top').css("background-color", "transparent");
  $(window).scroll(function(){
   if ($(this).scrollTop() > 400) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.99)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 300) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.75)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 200) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.5)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 100) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.35)").css("transition","0.3s ease-in-out ");
   } else {
    $('.home .x-navbar-fixed-top').css("background-color", "transparent").css("transition","0.3s ease-in-out ");
   }
    
   if ($(this).scrollTop() > 100) {
     $('.home .x-navbar-fixed-top').addClass('x-navbar-scrolled');
   } else {
     $('.home .x-navbar-fixed-top').removeClass('x-navbar-scrolled');
   }
    
  });
});

CSS

.x-navbar {
    border: none;
    box-shadow: none;
}
.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;
}
.x-navbar-scrolled .desktop .x-nav > li > a > span {
    color: #272727;
}

.x-navbar-scrolled .desktop .x-nav > li > a > span:hover {
    color: red;
}

Hope it helps,

Joao

[rickitambo]

Thanks Joao. Unfortunately, it did not work for me. instead, I used the following code to achieve this effect.
When scroll is at the top: logo and font are white, and navbar background is transparent.
When scrolled down: logo and font change color, navbar becomes white

In JS

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop();
        navbar = $('.x-navbar');
    		navbarfont = $('.x-navbar .desktop .x-nav');

    if (scrollPos > 250) {
      navbar.addClass('alt-color');
      navbarfont.addClass('alt-color');
      $('.x-navbar-fixed-top .x-brand img').attr('src','LINK TO COLOR LOGO');
    } else {
      navbar.removeClass('alt-color');
      navbarfont.removeClass('alt-color');
      $('.x-navbar .x-brand img').attr('src','LINK TO WHITE LOGO');
    }
        
  });
});

in CSS

.x-navbar {
    transition: 0.3s all linear;
    background-color: rgba(0,0,0,0) !important;
}
.x-navbar.alt-color {
    background-color: #ffffff !important;
}
.x-navbar .desktop .x-nav > li > a {
color: #ffffff !important;
}
.x-navbar .desktop .x-nav.alt-color > li > a {
color: #6E6E6E !important;
}
.x-navbar .desktop .x-nav.alt-color > li > a > span:hover,
.x-navbar .desktop .x-nav > li > a > span:hover {
    color: #1B8A82;
}

I have one challenge though: This effect should only apply to the landing page. All other pages shoud have the white navbar background and colored logo.

I had to change the default logo and font-color to white though in custimization. How can I apply this affect ONLY to the landing page?

Thanks for your help

[Thai]

Hi There,

Please provide us with your website URL so we can take a closer look.

Thank you.

[Author]

Posts