Flexslider / classic slider navigation arrows not showing/change color and move to either side?

[designbabe]

Hi I’m using the Flexslider / classic slider in cornerstone but my navigation arrows not showing up well. How do i get the arrows to show and also change color of the arrows and the boxes?
Also I wanted to move the arrows to be at either end, one the left middle and one the right middle.
any thoughts would be greatly appreciated.
thanks
I have the flexslider one on the homepage just understand the revolution slider

[basanta]

Hi There,

Thanks for writing in!

1. To fix the icon issue please update the theme and cornerstone to latest version and clear ur plugins cache server cache.

2. To make the slider navigation position like the screenshot please add this CSS to your theme option -> CSS

.flex-direction-nav {
    width: 100%;
    position: absolute;
    top: 45%;
}
.flex-direction-nav a.flex-next {
 right: 50px !important;
}

Hope this helps!

[designbabe]

Ok this work sort of i just don’t have the right button on the right side of the photo, like in my screenshot. but they moved down and have arrows now

[ruenel]

Hello There,

Please update the code and use this instead:

.flex-direction-nav {
    width: 100%;
    position: absolute;
    top: 45%;
}

.flex-direction-nav a.flex-next {
   right: 50px !important;
   left: auto;
}

.flex-direction-nav a {
    color: red;
    background-color: green;
    opacity: 1;
}

Screenshot

Hope this helps. Please let us know how it goes.

[designbabe]

@RueNel

.flex-direction-nav {
width: 100%;
position: absolute;
top: 45%;
}

.flex-direction-nav a.flex-next {
right: 50px !important;
left: auto;
}

.flex-direction-nav a {
color: red;
background-color: green;
opacity: 1;
}

thanks that worked!!

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!

[designbabe]

thanks Paul
I guess i spoke to soon the arrows not centering vertically on mobile see below thoughts on how to fix this is iphone 6 and doing same on 7.
thanks

[rad]

Hi @designbabe,

Please try changing this part

@media (max-width: 767px) {
.flex-direction-nav {
    width: 100%;
    position: absolute;
    top: 35%;
}

to this

@media (max-width: 767px) {
.flex-direction-nav {
    width: 100%;
    position: absolute;
    top: calc(50% - 30px);
} 

Thanks!