[blueoaksParticipant]

Hello. I am using the following javascript to make my navbar transparent on my homepage only, and only when scrollTop < 1.

This code works perfectly with Icon and Integrity, but I am trying to switch to Renew and now it doesnt work. The navbar remains solid white. I think Renew adds an !important declaration to the navbar background. I dont know the proper syntax to override this in the javascript. Adding !important to the transparent property in css makes it transparent all the time, which is not what I want.

Can you suggest a modification to my javascript that will restore this functionality?

To be clear, I want my navbar to have a white background everywhere except when the homepage is scrolled to top (because I have a fullscreen Rev slider there).

Thx

jQuery(document).ready(function($) {
  $('.Home .x-navbar a').css("color", "#fff");
  $('.Home .x-navbar').css("background-color", "transparent");  
  $(window).scroll(function() {
    if ($(this).scrollTop() < 1) {
      $('.Home .x-navbar').css("background-color", "transparent");  
      $('.Home .x-navbar a').css("color", "#fff");
      $('.Home .x-navbar').css("box-shadow", "none");
    } else {
      $('.Home .x-navbar').css("background-color", "#fff");
      $('.Home .x-navbar a').css("color", "#999");
      $('.Home .x-navbar').css("box-shadow", "0 0.15em 0.35em 0 rgba(0,0,0,0.135)");
    }
  });
});

[ThaiModerator]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[blueoaksParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for providing the login details. To resolve your issue, you just simply update the JS code and make use of this:

jQuery(document).ready(function($) {
  $('.Home .x-navbar a').css("color", "#fff");
  $('.Home .x-navbar').css("background-color", "transparent !important");  
  $(window).scroll(function() {
    if ($(this).scrollTop() < 1) {
      $('.Home .x-navbar').css("background-color", "transparent !important");  
      $('.Home .x-navbar a').css("color", "#fff");
      $('.Home .x-navbar').css("box-shadow", "none");
    } else {
      $('.Home .x-navbar').css("background-color", "#fff !important");
      $('.Home .x-navbar a').css("color", "#999");
      $('.Home .x-navbar').css("box-shadow", "0 0.15em 0.35em 0 rgba(0,0,0,0.135)");
    }
  });
});

Please let us know how it goes.

[blueoaksParticipant]

I replaced my JS code with what you provided here and it still does not work. The navbar remains white rather than transparent when scrolltop <1

So it seems the Renew stack css is still overriding my JS despite adding !important to it.

(I have cleared my browser cache and have site caching turned off)

Granted I could switch to Integrity, but there are a few things I like about Renew, and it should work 🙂

Please advise

[LelyModerator]

Hello There,

I update the code to this:

jQuery(document).ready(function($) {
  $('.home .x-navbar a').css("color", "#fff");
  $('.home .x-navbar').css('cssText', 'background-color:transparent !important');  
  $(window).scroll(function() {
    if ($(this).scrollTop() < 1) {
      $('.home .x-navbar').css('cssText', 'background-color:transparent !important');  
      $('.home .x-navbar a').css("color", "#fff");
      $('.home .x-navbar').css("box-shadow", "none");
    } else {
      $('.home .x-navbar').css('cssText', 'background-color:#fff !important');
      $('.home .x-navbar a').css("color", "#999");
      $('.home .x-navbar').css("box-shadow", "0 0.15em 0.35em 0 rgba(0,0,0,0.135)");
    }
  });
});

It is working now. See this:http://screencast-o-matic.com/watch/cbetVG6J4l
!important part of the previous code will not work.

Hope this helps.

[blueoaksParticipant]

that worked.
thank you very much.

[LelyModerator]

You’re welcome!

Cheers.

[Author]

Posts