Moving Back Button Down with iOS and Pixate

Question

I'm working on an iPhone app where I'm using Pixate:

navigation-bar back-indicator {
    background-image: url(backIcon.png);
    background-size: 25;
}

This results in:

however its not centered with the Back text. How do i get the image to move down slightly?

Ive tried background-top-padding however that simply squashes the image down.

Any ideas? Thanks.

Answer 1

After playing around with padding options, it seems like anything larger than the default indicator height (22pts) cannot be pushed downward with padding.

If you want to create a smaller back indicator, you can account for an increased padding by adjusting the height (or width) accordingly, like so:

navigation-bar back-indicator {
    background-image: url(custom_arrow.png);
    background-size: 17 19;
    background-bottom-padding: 2;
}

Also, it's worth noting that adding right padding to the back indicator will not move the back button text right, so you won't be able to fix the horizontal overlap in your particular example with padding on the back indicator. However, several examples from Apple drop the text altogether when using large indicators, so you might want to consider this as an option.