[Sean KParticipant]

I’m trying to get my “.x-navbar” to change color upon scrolling. I’ve tried plugging in multiple snippets of jQuery from Stack Overflow but none of them have worked. I feel like this has to be a simple little piece of JavaScript right?

EDIT:
Preferably, I’d like to be able to change/add a class to the navbar so I could easily change the color of the links when the bar color changes as well.

Any help would be amazing. Thanks!

[ZeshanMember]

Hi Sean,

Thanks for writing in!

This requires custom development, regretfully, that would fall beyond the scope of support we can offer. However, in the meantime, you can try using this JS under Custom > JavaScript in the Customizer:

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');
    }
  });
});

Adjust 1000 from the code to change the point. This code will apply a class of alt-color when the navabr reaches the position. You can then style it using CSS as per your preference. For example, add under Custom > CSS in the Customizer:

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

.x-navbar.alt-color {
    background-color: blue;
}

Hope this helps. 🙂

Thank you.

[Sean KParticipant]

Worked like a charm. I did have to a “!important” tag to the “background-color” for some reason. But it works just fine. Thanks!

[FriechModerator]

You’re more than welcome, glad we could help, Cheers!

[MikedrychatshopParticipant]

This reply has been marked as private.

[MikedrychatshopParticipant]

This reply has been marked as private.

[John EzraMember]

Hi there,

Thanks for writing in! Regretfully, we don’t have emails for you to contact us. Everything is handled here via the forum. You can click on the Set as private reply option to make your reply private and only our staff can have access to it, like you have done already. If you would like to be extra sure, you can create a new thread and explain your issue and what you have done so far and provide us your logins credentials via private message.

You should be able to make the entire new thread private if you are the creator. If not you can simply send us a message and we can make your thread private so it won’t show up on the forum.

Let us know how that goes. Hope this helps – thanks!

[MikedrychatshopParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Mike,

Thanks for the login credentials!

To remove the line, please add following CSS under Custom > CSS in the Customizer:

body.x-navbar-fixed-top-active .x-navbar-wrap {
   margin-bottom: 0;
}

Hope this helps. 🙂

Thank you!

[MikedrychatshopParticipant]

Hi,

Unfortunately the line is still there. If it helps, it only appears when the page first loads and disappears as soon as the user scrolls. It doesn’t reappear when they scroll back to the top though and begin to scroll again.

[FriechModerator]

Hi There,

Please add the code below instead.

.x-navbar-wrap .x-navbar {
	box-shadow: none;
}

Hope it helps, Cheers!

[MikedrychatshopParticipant]

Thanks for that – it worked perfectly.

I’m also looking to give the nav bar height and a white background when the user scrolls down as happens on this demo page – http://themeforest.net/item/myway-onepage-bootstrap-parallax-retina-template/full_screen_preview/4058880?ref=awerest

how would I do that?

Thanks

[RupokMember]

Hi there,

Thanks for updating. You can add this under Custom > CSS in the Customizer.

.x-navbar.x-navbar-fixed-top.alt-color {
  background-color: rgba(255, 255, 255, 0.4) !important;
}

Make sure you are not using any other CSS that might conflict with this.

Hope this helps.

Cheers!

[MikedrychatshopParticipant]

Hi,

Thanks for getting back to me. Unfortunately that didn’t work. Could you point me towards the CSS that isn’t working. It’s crucial that it stays as it is when the page is loaded, and then changes when the user starts to scroll.

Thanks,

Mike

[Paul RModerator]

Hi Mike,

Upon checking, I can see the code works though the color changes after 1000px from the top.

You need to change your javascript code to make the change right after you scroll.

Change this part

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

to

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

Also, if you want a solid white color, you can change the css code to this.

body .x-navbar.x-navbar-fixed-top.alt-color {
     background-color: #fff !important;
}

Hope that helps

[Author]

Posts