Hello,
I wish to delete text “previous” and “next” below arrows icons inside testimonial widget.
I tried with jQuery in many ways :
$('li.flex-nav-prev').html('');
or
$('li.flex-nav-prev > a').html('')
or
jQuery('flex-nav-prev > a').contents().filter(function(){
return (this.nodeType == 3);
}).remove();
This is my html code :
<div>
<ul class="flex-direction-nav">
<li class="flex-nav-prev">
<a class="flex-prev" href="#">Previous</a>
</li>
<li class="flex-nav-next">
<a class="flex-next" href="#">Next</a>
</li>
</ul>
</div>
But it doesn’t work.
Thank you so much
Hi there
Hope you are having a good day and thank you for your question
To remove these arrows, kindly add the following sample CSS code to your site.
.flex-direction-nav .flex-prev,.flex-direction-nav .flex-next{content:"";}
Thanks!
Colorlib Support Team
Hi Mike,
How are you today ?
Thank you for this answer but i don’t want remove arrows but just the text “previous” and “next” below the arrows.
It’s possible ?
Hi
Please provide a link to this page
hey there
Please add this CSS in appearance - customize - additional CSS
.flex-direction-nav li a:before {
visibility: visible;
}
.flex-direction-nav li a {
visibility: hidden;
}
Thanks!
Colorlib Support Team
It works !
Thank you Noda
Can you explain me the difference between flex-direction-nav li a:before and flex-direction-nav li a ?
Why use visibility:visible on the first and visibility: hidden on the second ?
hey there
“flex-direction-nav li a:before and flex-direction-nav li a ?” - :before is pseudo-element and its an icon we want to leave visible,
li a is next prev text we want to hide in the li class
You can change position it will work anyway