Docs

[Rich H]

Ive been messing with this for a while and am having some trouble with it. Im using renew and am trying to have the nav bar be transparent to start with, and show the larger logo (would also like some padding on the top of it too). Then once scroll it goes to rgba(0,0,0,0.5) and the padding at the top goes away. I have it changing the logos fine on scroll but if I could get this working it would be golden!

The site is – https://karasingroupnew.2ninjas.ca

This is the code I’m using.

jQuery(document).ready(function($){
  $(window).scroll(function(){
    if ($(this).scrollTop() > 0) {
      $('.x-navbar-fixed-top').css("background-color", "rgba(0,0,0, 0.3) !important");
      $('.x-navbar-fixed-top .x-brand img').attr('src','http://karasingroupnew.2ninjas.ca/wp-content/uploads/sites/97/2016/08/karasinlogo-small-nobracket.png');
    } else {
      $('.x-navbar-fixed-top').css("background-color", "transparent  !important");
      $('.x-navbar .x-brand img').attr('src','http://karasingroupnew.2ninjas.ca/wp-content/uploads/sites/97/2016/08/karasinlogo-small.png');
    }
  });
});

and

.x-navbar {background-color:transparent;}
.x-slider-container {margin-top:-40px;}

I had to add the x-navbar transparent as it would show the default background color from the customizer and i can’t seem to wipe that value.

[Rich H]

Ive almost got it now… however the padding only shows after i scroll down THEN scroll back to the top.

jQuery(document).ready(function($){
  $(window).scroll(function(){
    if ($(this).scrollTop() > 0) {
      $('.x-navbar-fixed-top').css("background-color", "rgba(0,0,0, 0.5)");
      $('.x-navbar-fixed-top').css("padding-top", "0");
      $('.x-navbar-fixed-top .x-brand img').attr('src','http://karasingroupnew.2ninjas.ca/wp-content/uploads/sites/97/2016/08/karasinlogo-small-nobracket.png');
    } else {
      $('.x-navbar-fixed-top').css("background-color", "transparent");
      $('.x-navbar-fixed-top').css("padding-top", "35px");
      $('.x-navbar .x-brand img').attr('src','http://karasingroupnew.2ninjas.ca/wp-content/uploads/sites/97/2016/08/karasinlogo-small.png');
    }
  });
});

[Rue Nel]

Hello There,

Thanks for writing in! To resolve your issue, please have your JS code updated and make use of this code instead:

jQuery(document).ready(function($){
  $(window).scroll(function(){
    if ($(this).scrollTop() > 0) {
      $('.x-navbar').css("background-color", "rgba(0,0,0, 0.5)");
      $('.x-navbar').css("padding-top", "0");
      $('.x-navbar .x-brand img').attr('src','http://karasingroupnew.2ninjas.ca/wp-content/uploads/sites/97/2016/08/karasinlogo-small-nobracket.png');
    } else {
      $('.x-navbar').css("background-color", "transparent");
      $('.x-navbar').css("padding-top", "35px");
      $('.x-navbar .x-brand img').attr('src','http://karasingroupnew.2ninjas.ca/wp-content/uploads/sites/97/2016/08/karasinlogo-small.png');
    }
  });
});

Please let us know how it goes.

[Rich H]

Same as the way I had it. doesn’t give the padding at the top until you scroll down then back up.

[Nabeel A]

Hi again,

Please replace the previous code with this one:

jQuery(document).ready(function($){
  $('.x-navbar').css("padding-top", "35px");
  $(window).scroll(function(){
    if ($(this).scrollTop() > 0) {
      $('.x-navbar').css("background-color", "rgba(0,0,0, 0.5)");
      $('.x-navbar').css("padding-top", "0");
      $('.x-navbar .x-brand img').attr('src','http://karasingroupnew.2ninjas.ca/wp-content/uploads/sites/97/2016/08/karasinlogo-small-nobracket.png');
    } else {
      $('.x-navbar').css("background-color", "transparent");
      $('.x-navbar').css("padding-top", "35px");
      $('.x-navbar .x-brand img').attr('src','http://karasingroupnew.2ninjas.ca/wp-content/uploads/sites/97/2016/08/karasinlogo-small.png');
    }
  });
});

This should give the padding on site load. Let us know how this goes!

[Rich H]

Awesome, thanks that did the trick

[Rich H]

I am trying to make the nabber start with a different color on one page

$('body.page-id-767 .x-navbar').css("background-color", "#000");

Doesn’t seem to do the trick, any suggestions? Ive tried placing it in the top section and the proper if area as well with no luck.

https://karasingroupnew.2ninjas.ca would be the page I am trying to have a different color nav bar to start with so its visible.

[Joao]

Hi There,

Based on the information provided I am not entirely sure what you would like to achieve?

Your Navbar on your home page is from transparent to black with transparency at the moment.

How you would like it to look like?

Please provide more details about your goals and point us the URL of the page you are referring to.

Thanks

Joao

[Rich H]

On the home page its perfect, click on the blog page, because its white on white you cannot see anything and X does not allow us to edit the blog pages :/ Soooo I want the nav bar to start black on the Blog page only, not transparent.

[Rupok]

Hi there,

You can’t edit the blog page but you can always use the selector .blog to place CSS or script for blog page only. TO set a background color initially; you can use this :

jQuery( function($) {   
  $('.blog .x-navbar').css("background-color", "#000");
});

However it will be reset if you scroll down and come to top again. So I would suggest you to use the CSS below :

.blog .x-navbar-wrap {
  background: #000;
  min-height: 115px;
}

Hope this helps. Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Rich H]

You guys are the best! Thank you.

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts