var navIcon1 = $('.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after');
if (iconPos >= audPos && iconPos < eventPos) {
navIcon.css('color', 'black');
navIcon1.css('color', 'black');
}
I am trying to change the color of bootstrap navigation. I tried this code but it is not working for me.
Can I change the CSS of pseudo elements with jQuery?
Rather than adding css in your if, add a clas to "nav-toggle" for the given position and add your color for that class
The only one of the elements you can modify using this method is .nav-toggle span, you could do:
if (iconPos >= audPos && iconPos < eventPos) {
$(".nav-toggle span").css('color', 'black');
}
As to the other ones: :before, :after etc. are pseudo elements - jQuery can't access them the way you are trying to do it.
Adding a class containing your preferred color to the elements you want to change would be a way of achieving what you want to achieve.
