CODEWITHSUNDEEP
javascriptjqueryhtmlcssnivo-slider
Kyle Yeo
Kyle Yeo

Reputation: 2368

Nivo Slider Thumbnail / ControlNav not positioning inside slider

This is the first time i'm trying out Nivo Slider, so bear with me here --

I'm trying to position my controlNav thumbnails INSIDE the slider (I want it in the center, 15px from the bottom of the slider), but so far using position:absolute and left and top attributes just make the entire positioning of the thumbnails position around the body instead of the slider.

Am I doing something wrong? I'm looking online for solutions but I just can't find any. Maybe I'm searching for the wrong keywords?

The site I'm testing it out with is [link removed]. I've reset the thumbnails to the original centered below slider layout, if you want to fiddle with it inside the console it'll be easier.

Upvotes: 0

Views: 3632

Answers (3)

Kyle Yeo
Kyle Yeo

Reputation: 2368

Ah, looks like i've found the answer with help from @aditya and @mToce's answers.

Seems that I forgot about positioning the #front-showcase as a relative element, thus making the controlNav position itself with the body element instead of the slider element.

For more information, read this :

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

I've solved the thing by entering position:relative; inside my #front-showcase, and entering position:absolute; inside .controlNav.

Hope this helps!

Upvotes: 0

mToce
mToce

Reputation: 302

If when you say "thumbnails", you mean the small pager icons then you can change the css to:

#front-showcase .nivo-controlNav {
z-index: 10;
position: relative;
bottom: 40px;
}

Here I removed display:block and you can adjust the 40px to what ever will suit your layout needs.

Upvotes: 3

Aditya M P
Aditya M P

Reputation: 5337

In your CSS, set the positioning properties on .nivo-control instead of nivo-controlNAV.

This worked for me by adding to your <head>:

<style type="text/css">
    .nivo-control {
        position:relative;
        top:-45px;
    }
</style>

Upvotes: 1

Related Questions