Flexslider nav buttons

[littleantz]

Hi,

How can I center the nav button of flexslider? The circle dots on the left.

I tried this css override but no luck.

#featured .standard-slider-wrapper .flex-control-nav {
left: auto;
position: center;
width: 960px;
text-align: center;
margin: 0 auto;
}

What is the proper way ?

Thanks

Topic

[Jason Bobich]

Hello,

I apologize, but there’s no feature in the theme for this. You’d have to make your own CSS customizations for this.

There’s really no proper way. When working with unordered lists, it is sort of difficult to center these items without knowing the width of the containing <ul>. If you google around there are various approaches you can try, but nothing really out there that is simple and easy across all web browsers.

The most common and simplest way is to essentially just to display the list items as inline-block so the styling can remain, but you can use text-align: center on the container to center them like text.

http://stackoverflow.com/questions/1695175/how-to-horizontally-center-an-unordered-list-of-unknown-width

http://stackoverflow.com/questions/8641251/how-do-i-center-list-items-inside-a-ul-element

http://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/

[littleantz]

Thanks for reply Jason,

If i want to use stand alone flex slider instead, will it not conflict with your built in flex? I saw in woothemes that flexslider has those buttons default on center.

Thanks

[Jason Bobich]

I think it should work just fine. Give it a try and see how it works. I’ve never personally tried the WordPress plugin.

[Author]

Replies