Custom CSS Code to change navigation arrow color

[wordpress-enthusiast]

Hi

Anyone care to share the custom css code to change the colors of the navigation arrows ( site-wide) ?

#1: The navigation arrows become visible when the mouse is hovered on the slider.

Color breakdown of the navigation arrows:

B/G: Grey (#dee2e8) | Border: White | Arrow : Black

Arrow Sample screenshot (#1)

#2: On mouse hover of the nav arrows

Color breakdown of the navigation arrows:

B/G: Red ( #eb1f28 ) | Border: White | Arrow : White

Arrow Sample screenshot (#2)

Page link

Thanks in Advance

[PaulOB]

In a bit of a rush as usual as just on my way out for the evening but try something like this:

.nasa-nav-arrow.slick-arrow svg{
    border-radius:4px;
    fill:#000;
    border:1px solid white;
    background:#dee2e8;
}
.nasa-nav-arrow.slick-arrow:hover svg,
.nasa-nav-arrow.slick-arrow:hover svg:hover{
    background:#eb1f28;
    fill:#fff;
    border:1px solid white;
}

You may need to add !important to those rules if they don’t show for you but they are working without when I inject the code live.

[wordpress-enthusiast]

Awesome !

Thanks Paul.