Question

174

Nivo Slider - Position navigation bullets at bottom of slider, rather than underneath

rated 0 times [ 177] [ 3] / answers: 1 / hits: 5260 / 11 Years ago, thu, january 2, 2014, 12:00:00

I'm making a website and have used Nivo Slider to create a jQuery slider.

I'm having an issue with the bullets used to show which slide the user is viewing. I would like the bullets to appear on the images of the slider, rather than below.

I managed to move the bullets to the location using the following CSS code:

.nivo-controlNav {

    text-align:center;

    padding: 15px 0;

    position: absolute;

    left: 50%;

    margin-left: -50px;

    top: 365px;

    z-index:3000 !important;

}

.nivo-controlNav a {

    display:block;

    width:22px;

    height:22px;

    background:url(../images/banner/dots.png) no-repeat;

    text-indent:-9999px;

    border:0;

    margin-right:0px;

    float:left;

}

Here's a screenshot of how they should look:
http://i41.tinypic.com/mt59gi.png

But once I resize the browser window, the bullets move off the slider, like this: http://i40.tinypic.com/2ldtus8.png

I've changed top: 365px; to a percentage too, but that seemed to produce the same result.

Is there any way to keep the bullets on the slider, even when the browser window is resized? The slider width is 100%, so the slider will also resize with the browser window. Preferably, I'd like to keep it that way, if possible.

Any help is greatly appreciated.

EDIT: I've posted a test version to www.fearless-music.net/test/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaliyahcynthiac

Add To Favorites

Follow

Total Points: 91

Total Questions: 94

Total Answers: 119

Location: Vanuatu

Member since Wed, Oct 14, 2020

4 Years ago

answered 11 Years ago feliciarainak · Accepted Answer

If the width of the image is changing when the browser is resized then more than likely so is the height.

In this case if the height is changing your code top: 365px; becomes irrelevant.

IMO I would adjust the distance from the top of the wrapper with a media query ... Something like so:

.nivo-controlNav {

    text-align:center;

    padding: 15px 0;

    position: absolute;

    left: 50%;

    margin-left: -50px;

    top: 365px;

    z-index:3000 !important;

}



@media (max-width: 960px) {



.nivo-controlNav {

    text-align:center;

    padding: 15px 0;

    position: absolute;

    left: 50%;

    margin-left: -50px;

    top: 265px;

    z-index:3000 !important;

}



}



@media (max-width: 768px) {



.nivo-controlNav {

    text-align:center;

    padding: 15px 0;

    position: absolute;

    left: 50%;

    margin-left: -50px;

    top: 165px;

    z-index:3000 !important;

}



}



@media (max-width: 400px) {



.nivo-controlNav {

    text-align:center;

    padding: 15px 0;

    position: absolute;

    left: 50%;

    margin-left: -50px;

    top: 65px;

    z-index:3000 !important;

}



}

I would be best to see what break points you are trying to compensate for and see what the height of the image changes to, then determine the necessary value for top in your css.

More info here.