CODEWITHSUNDEEP
htmlcsssliderflexslider
Pixelen
Pixelen

Reputation: 5

How to get control nav on top of flexslider?

I am new to flexslider (http://www.woothemes.com/flexslider) and having difficulty getting the control nav to be on top of the slider image. I would like it to be in the bottom right-hand corner of the images. But no matter what I seem to do with the styling it always defaults to underneath the slider. You can see the website here: http://dakar.bournemouth.ac.uk/~hmonaghan/

Would appreciate any help, cheers!

HTML:

<div id="header" class="flexslider">
<ul class="slides">
<li>
    <div class="slidertext-holder">
    <div class="slidertext">
        <h1>"Donec auctor volutpat lorem, nec cursus augue congue ac. Curabitur malesuada lacinia lorem..."</h1>
        <h2>WARREN MOORE</h2>
    </div>
    </div>
    <img src="images/headerfootball.png">
</li>
<li>
    <div class="slidertext-holder">
    <div class="slidertext">
        <h1>"Duis non metus ipsum. Maecenas sit amet risus ut ligula tempus commodo a in justo."</h1>
        <h2>SOMEONE ELSE</h2>
    </div>
    </div>
  <img src="images/headerfootball.png">
</li>
<li>
    <div class="slidertext-holder">
    <div class="slidertext">
        <h1>"Luke, I am your father."</h1>
        <h2>DARTH VADER</h2>
    </div>
    </div>
  <img src="images/headerfootball.png">
</li>
</ul>
<ol class="flex-control-nav">
    <li><a class="active">1</a></li>|
    <li><a class="">2</a></li>|
    <li><a class="">3</a></li></ol>

CSS:

.ul slides {
margin-bottom:-0.5%;
}

.flex-control-nav {
color:#FFF;
margin-left:20%;
width:35%;
font-family: Proximanova Regular;
position:absolute;
}

.slidertext-holder {
margin-left: auto;
margin-right: auto;
}

.slidertext {
width:35%;
margin-left:55%;
position: absolute;
bottom: 10%;
}

Sorry, have updated to add code.

Upvotes: 0

Views: 13710

Answers (3)

sebastien levesque
sebastien levesque

Reputation: 1

if you are working with responsive design you cannot use css to positionning the control nav div who is rendered under the slide... to move the control on top of slide (like views slideshow cycle option), you have to go in flexslider settings (configuration>media>flexslider), edit the option set and go to «Advanced options» tabs. There is a field called «Controls container (Advanced)» where you can specified the class or id of a container to receive the controls! If you dont have any div to use add one manually in the header of your view ex: and simply specify .flex-control in the control container field... Hope my explaination are clear!

Upvotes: 0

Laxmana
Laxmana

Reputation: 1706

You need to set z-index of the .flex-control-nav to a big number ie z-index: 1000;. That's way the control bar will be shown on top of slider.

More about z-index : http://www.w3schools.com/cssref/pr_pos_z-index.asp

Upvotes: 0

David Randall
David Randall

Reputation: 770

I think what you're looking for is:

.flex-control-nav {
  bottom: 20px;
  position: absolute;
  right: 20px;
  text-align: center;
  width: auto;
  z-index: 1000;
}

Upvotes: 5

Related Questions