How can I make the direction nav buttons always visible and outside?

i.e. like http://www.woothemes.com/flexslider/

Thanks

Comments

greg.b’s picture

I have spent half a day fiddling with this trying various methods mentioned on the net.

Seems what might have been getting in the way was in the module flexslider_img.css

/* Avoid scroll bar issues when the slider is next to the edge of the page */
.flexslider .flex-direction-nav a,
.flexslider .flex-direction-nav a {
display: none;
}

I commenting out the "display:none;" and at least I can now say ala Oliver Hardy "Now we are getting somewhere".

BUT is this the start of a kludge as it seems this is set up this way for a reason?

greg.b’s picture

Ok, hopes this saves someone a day that I wasted.

I put this in my zen subtheme pages.css

.flexslider .flex-direction-nav a,
.flexslider .flex-direction-nav a {
display: block; /* I added this line */
}

.flex-direction-nav .flex-next { right: 0 !important; margin-right: -40px; opacity: 1 !important; }
.flex-direction-nav .flex-prev { left: 0 !important; opacity: 1 !important; margin-left: -40px; }
.flexslider { width: 90%; margin: 0 auto; }

So far seems to work.

greg.b’s picture

Status:Active» Fixed

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

web226’s picture

Thanks, this worked with Best Responsive theme with Drupal 7.24
I put a new custom.css in the theme folder and included the custom.css in the theme.info file. The css above is in the custom.css file.

tea2sugars’s picture

Genius! Just spent 2 hours in pain sorting that until i decoded to ask Google!

Thanks of the input!

leoklein’s picture

Very helpful!