How to leave navigational arrow centered on flexslider

Asked

Viewed 299 times

4

I have a banner that is displayed on a flexslider and need to leave the navigation arrows centered on the sides, today are at the base. As much as I change I can’t leave them centralized, my limited knowledge of css limits me.

The page can be seen here: Flexslider

The css is like this:

.flex-direction-nav a {
    display: block;
    width: 27px;
    height: 27px;
    background-image: url(../images/slider/arrows.png);
    background-repeat: no-repeat;
    cursor: pointer;
    text-indent: -999em;
}
.flex-direction-nav a.flex-prev, .flex-direction-nav a.flex-prev.flex-disabled {
    background-position: 10px 7px;
}
.flex-direction-nav a.flex-next, .flex-direction-nav a.flex-next.flex-disabled {
    background-position: -17px 7px;
}
.flex-direction-nav a.flex-disabled:link, .flex-direction-nav a.flex-disabled:visited, .flex-direction-nav a.flex-disabled:hover, .flex-direction-nav a.flex-disabled:active {
    background-color: rgba(0,0,0,0.6);
    cursor: default;
}
/* Control Nav */

.flex-control-nav {
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 70px;
    bottom: 15px;
    background-color: rgba(0,0,0,0);
    padding: 10px 20px;
    overflow: hidden;
    z-index: 50;
}
css

1 answer

3


If you change the bottom of 15px for 150px you get the desired effect:

.flex-direction-nav {
    position: absolute;
    right: 0px;
    bottom: 150px; <---------------------AQUI

  • Hello @Jorgeb., I made the change but it continues in the same way, still at the base what changed were the markers, the squares that show the amount of images.

  • 1

    Hello, now I got it, following the tip I changed the correct location.

  • Glad I could help :)

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.