javascript - Nivo Slider Nivo-control Nav margin

Question

I have a site that has 4 subpages. I want to add nivo slider on each page in separate height. I've added 3 sliders successfully, but on one page I want to show nivo-controlNav with margin top 30px, how can I do that?

My code looks like this:

.nivo-controlNav {
text-align:center;
padding: 0;
}

It's good for my other 3 pages but I want to add:

.nivo-controlNav {
text-align:center;
padding: 0;
margin-top:30px;
}

Answer 1

You must add some class or id to separate from others. Then you write a style for that particular class or id or use the inline style (Inline is not a good practice) for example

.classname
{
margin-top:30px;
}

Answer 2

If it is on a completely separate page you can easily just add the second set of rules you have above. If they are all governed by one single style sheet you can do this

   .differentClassName{
    margin-top: 30px;
  }

Answer 3

Add this on the page wher u need margin in < head >< / head > section

<script type="text/javascript">
    $(document).ready(function () {
    $('.nivo-controlNav').css('margin','30px');

    });
</script>

if that doesnt help try setting z-index, visible properties like above $('.nivo-controlNav').css('z-index','1500'); $('.nivo-controlNav').css('visibility','visible');

Answer 4

.nivo-controlNav {
text-align: center;
padding:10px 0px 0px 0px;
clear:both;
position: relative;
z-index: 10;}