Flexslider arrows not displayed properly

Question

I've been stuck with this problem for some time, and can't seem to find an answer, so I decided to ask straight.

I am using the Flexslider plugin to display multiple images on a site, however, the arrows navigation that displays when hovering the image is off. The arrow is cut off at the top, and the text underneath it that is supposed to be completely hidden is partly showing. Here is a screen shot of the problem:

I tried tinkering with the CSS, but I just can't figure it out. Could anyone please help me?

Answer 1

You can also add line-height to solve it:

.flex-direction-nav a  {
    line-height: 40px;
}

PS: It seems like a Flexslider bug, that it does not work properly with default settings.

Answer 2

Remove overflow: hidden; from .flex-direction-nav a:

.flex-direction-nav a  { 
    display: block; 
    width: 40px; 
    height: 40px; 
    margin: -20px 0 0; 
    position: absolute; 
    top: 50%; z-index: 10; 
    overflow: hidden; /* Remove this line */
    opacity: 0; 
    cursor: pointer; 
    color: rgba(0,0,0,0.8); 
    text-shadow: 1px 1px 0 rgba(255,255,255,0.3); 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    transition: all .3s ease; 
}

If you need to alter or remove the text that shows up by default for 'Previous' and 'Next', consult the options documentation 'Tailor to Your Needs' for the plugin here: http://www.woothemes.com/flexslider/

Following that, just update the settings for:

prevText: "Previous",    //String: Set the text for the "previous" directionNav item
nextText: "Next",        //String: Set the text for the "next" directionNav item

Answer 3

The arrow, which is a font, is too large for its container.

Just add this CSS, it will reduce the size of the font, and in turn, fix the cut off issue.

.flex-direction-nav a:before {
    font-family: "flexslider-icon";
    font-size: 35px;
    display: inline-block;
    content: '\F001';
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}

Add this into your CSS and it will override the default settings for flexslider