Flexslider arrows not displayed properly

jquery css plugins navigation
thosetinydreams picture thosetinydreams · Nov 6, 2013 · Viewed 25.1k times · Source

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:

enter image description here

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

Answer

And390 picture And390 · Jan 14, 2014

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.

Related questions

How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
How can I remove a style added with .css() function?

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value: if(color != '000000') $("body").css("background-color", color); else // remove style ? How can I do this? Note that the line above …

Read More
Slide right to left?

How can I have a div go from collapsed to expanded (and vice versa), but do so from right to left? Most everything I see out there is always left to right.

Read More