Caption beneath the slider

Hi,

You can add CSS to adjust the position of the ‘nivo-caption’ class.
If doing so, you will also need to set the ‘overflow’ of the ‘nivoSlider’ to ‘visible’

Alternatively, our paid-for Meta Slider Pro includes a theme editor with options to re-position the captions. For more information, please see our site.

Thank you for your reply. Would it be possible for you to send me an example of the CSS code? I don’t know much about it, so it would really help me out.

Hi,

The following should achieve what you need:

.nivoSlider {
 overflow: visible;
}

.nivo-caption {
 top: 100%;
}

Thank you. Unfortunately now the caption disappeared completely. Is it possible for it to show just under the picture?

Hi,

Please could you update the CSS that you added to the following:

.nivoSlider {
 overflow: visible!important;
}

.nivo-caption {
 top: 100%;
}

Thank you very much, it worked!

I’m having the same question, (https://www.meechp.org/) coupled with inserting the slider into a custom theme design, so putting it to the home.php file. Here’s the insert code:

<div class="slider">
<?php 
    echo do_shortcode("[metaslider id=4712]"); 
?>
		
            <div class="bottom"></div>
        </div>

The CSS is:

div.slider { width: 650px; max-height:300px; margin-left: 0; padding-top:15px; padding-bottom:20px; overflow: hidden; position: relative; display:block!important;}

.metaslider .caption,
.metaslider .cs-title,
.metaslider .nivo-caption {
    font-size: 1.3em;
}
.metaslider .caption,
.metaslider .cs-title,
.metaslider .nivo-caption {
    background: #F3AD4D; 
	color: #000000;
}

.nivoSlider {
	overflow: visible!important;
}
.nivo-caption {
 top: 100%;
}

I have NO clue about PHP, and manage to regularly screw up css…
Any help is greatly appreciated!

Hi @dosuntai, I think it’s usually better to open a new discussion and then link to an old one if needed. That way the original poster doesn’t get bothered with emails about an old thread ?? Just remember for next time ??

First, remove the max-height from div.slider rule. Also, remove the two rules you copied from above.

Next, add in the following:

.nivo-caption {
  position: static !important;
}

Thank you SO much!

Apologies for not starting a new thread. I’ll remember that next time.