Docs

[BradleyB]

Hi,

I am redesigning our navbar and have a couple questions.

I am going to use the following code to create a transparent navbar which gets color upon scroll. I haven’t implemented the code yet because the site is live and I need to fix some issues:

body .x-navbar-wrap {
     height:auto;
}

body .x-navbar {
     background-color:transparent;
     border:0;
     box-shadow:none;
}

body .x-navbar-solid {
     background-color: rgba(0, 0, 0, 0.5);
}

jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() >50) {
              $('.x-navbar').addClass("x-navbar-solid");
        }else {
              $('.x-navbar').removeClass("x-navbar-solid");
        }
    });
});

Questions 1: Is there anyway to only apply the above code to certain pages? I have landing pages associated with my site which I do not want to apply this to.

Questions 2 Is there anyway to slow the transition from transparent to color? I would like it to gradually appear?

Thank you so much!!

[BradleyB]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in!

#1. If you want to apply this to certain pages, then place the CSS/JS to page level Custom CSS/JS instead of Customizer. See – http://prntscr.com/ar6a1c

#2. You can try adding this code :

.x-navbar {
  transition: all 0.5s ease 0s;
}

Hope this helps.

Cheers!

[BradleyB]

amazing. Thank you so much!

[John Ezra]

You’re most welcome!

[Author]

Posts