[zlayoParticipant]

Hello x support =)

I was wondering if you could help me with changing the color of text when i scroll pass the slider, the site is (http://virtus-fortis.hr). I got the background color to change from transparent when on slider to white when off the slider, but can’t change the navbar text color when on and off the slider (also hover color). Hope you can help =)

Thank you very much!

[ZeshanMember]

Hi Zlayo,

Thanks for writing in! 🙂

This could be possible with jQuery and CSS customization. While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

To achieve that, first add following JS code under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
  var $win          = $(window);
  var $sliderBottom = $('.x-slider-container.below');
  var $navbar       = $('.x-navbar');
  var sliderHeight;

  $win.scroll(function() {
    sliderHeight = $sliderBottom.outerHeight();
    if ( $win.scrollTop() > sliderHeight - 1 ) {
      $navbar.addClass('scrolled');
    } else {
      $navbar.removeClass('scrolled');
    }
  });
});

Then add following CSS code under Custom > CSS in the Customizer:

.x-navbar.scrolled .desktop .x-nav > li > a {
    color: #000;
}

.x-navbar.scrolled .desktop .x-nav > li > a:hover, .x-navbar.scrolled .desktop .x-nav > .x-active > a, .x-navbar.scrolled .desktop .x-nav > .current-menu-item > a {
    color: #000;
}

Replace #000 with your desired color (you can generate hex color codes from here).

Hope this helps. 🙂

Thank you!

[zlayoParticipant]

NOOOO MAAAN, THANK YOU! YOU GUYS ALWAYS OVERDELIVER! #winwinwin Thank you very much for this information! =)
Sorry for bothering, but you are so great that i have to ask you this also 😀 how can i remove line above link in navbar that is active or hovered over?

[FriechModerator]

Hi There,

Thanks, you can add this under Custom > CSS in the Customizer.

.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 {
	box-shadow: none !important;
}

Hope it helps, Cheers!

[zlayoParticipant]

OFC it works, thanks a lot, Cheers!

[ChristopherModerator]

You’re welcome.

[Author]

Posts