Navigation buttons center aligned

Support
#1

Hi, I would like to center the navigation arrows and also position them to clear either above or below the slide title. The link to my page is:

http://www.moxie.design/pricing-promos-packages/digital-dropkick/

Please scroll down the section under “Happily Dropkicked Clients” and see the nav buttons are to the left. When viewed on mobile, they overlap the slide title.

Thanks so much!

Liz

#2

Hi Liz,

To fix it, you can add this in Cornerstone > Settings > CSS

body .flex-direction-nav {
    top: 50px;
    left: calc(50% - 46px);
    position: absolute; 
    z-index: 99999;
}

Hope that helps.

#3

Thanks, that positioned them in the center, but on mobile they don’t clear the slide title. Any thoughts on that?

#4

Hello There,

Do you like something like this in smaller screens?

Please have the given code updated and make use of this code instead:

body .flex-direction-nav {
    top: 50px;
    left: calc(50% - 46px);
    position: absolute; 
    z-index: 99999;
}

@media(max-width: 979px){
  body .flex-direction-nav {
    position: relative !important;
    top: auto;
    left: auto;
    display: block;
    width: 100px;
    text-align: center;
    margin: 0 auto;
  }
}

Please let us know if this works out for you.

#5

I would prefer if the nav arrows were above the slide. Is that possible? Thanks!

#6

Hi again,

This may not be possible as navigation arrows may overlap with the title if placed above in some screens. Best option would be below the slider.

Hope this helps!