Introduction

On iOS 7, navigation bar button spacing often feels wider than a custom design expects. The usual fix is to stop relying on the default placement and instead add a spacer item or a custom view so you can control how close the visible button sits to the edge.

Why the Default Spacing Exists

UINavigationBar applies built-in margins so controls are not flush against the screen edge. That default works well for standard system buttons, but image buttons and tightly aligned custom layouts often look slightly off.

In iOS 7, developers commonly corrected this with a fixed-space UIBarButtonItem inserted before the real button item. The spacer width can even be negative, which shifts the visible item outward.

Use a Fixed-Space Bar Button Item

If you already have a normal UIBarButtonItem, a spacer is the simplest adjustment.

1- (void)viewDidLoad {
2    [super viewDidLoad];
3
4    UIBarButtonItem *menuItem =
5        [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"menu"]
6                                         style:UIBarButtonItemStylePlain
7                                        target:self
8                                        action:@selector(openMenu)];
9
10    UIBarButtonItem *negativeSpacer =
11        [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace
12                                                      target:nil
13                                                      action:nil];
14    negativeSpacer.width = -10.0f;
15
16    self.navigationItem.leftBarButtonItems = @[negativeSpacer, menuItem];
17}

The same pattern works on the right side:

1UIBarButtonItem *saveItem =
2    [[UIBarButtonItem alloc] initWithTitle:@"Save"
3                                     style:UIBarButtonItemStylePlain
4                                    target:self
5                                    action:@selector(saveTapped)];
6
7UIBarButtonItem *negativeSpacer =
8    [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace
9                                                  target:nil
10                                                  action:nil];
11negativeSpacer.width = -10.0f;
12
13self.navigationItem.rightBarButtonItems = @[negativeSpacer, saveItem];

There is no universal width that fits every asset. Values like -5, -10, or -16 are just starting points. You should tune visually against your icon size and the rest of the navigation bar.

Use a Custom View for Finer Layout Control

If spacing is only one part of the problem, create a custom UIButton and wrap it in a UIBarButtonItem. That gives you control over frame size, edge insets, and touch handling.

1UIButton *profileButton = [UIButton buttonWithType:UIButtonTypeCustom];
2[profileButton setImage:[UIImage imageNamed:@"profile"] forState:UIControlStateNormal];
3profileButton.frame = CGRectMake(0.0f, 0.0f, 32.0f, 32.0f);
4profileButton.contentEdgeInsets = UIEdgeInsetsMake(0.0f, -8.0f, 0.0f, 8.0f);
5[profileButton addTarget:self
6                  action:@selector(profileTapped)
7        forControlEvents:UIControlEventTouchUpInside];
8
9UIBarButtonItem *customItem =
10    [[UIBarButtonItem alloc] initWithCustomView:profileButton];
11
12self.navigationItem.leftBarButtonItem = customItem;

This approach is better when the icon needs to move without shrinking the tappable area. It also helps when you want a nonstandard image size or a text-and-icon combination.

Decide Between Spacer and Custom View

Use a spacer when you like the default button behavior and only need the item to sit a few points closer to the edge. Use a custom view when you need to tune multiple properties at once, such as icon position, width, font, or touch region.

For older codebases, keep the workaround local if possible. A global appearance hack can seem convenient at first, but it usually spreads layout assumptions into screens that never needed the adjustment.

Common Pitfalls

The first mistake is pushing the item too close to the edge. A design may look cleaner, but the button still needs a comfortable tap target. Test the interaction on a real device, not only in the simulator.

Another issue is assuming an iOS 7 spacing trick behaves the same on later releases. Navigation bar layout changed over time, so negative spacers that looked correct on iOS 7 can create odd alignment elsewhere.

Custom views can also break expected behavior if the frame is too small or hit testing is misaligned. When you wrap a UIButton, make sure its bounds are explicit and its action still fires reliably.

Finally, change both sides with care. Pulling the left item outward while leaving the right item unchanged can make the whole bar feel unbalanced even if the individual adjustment is technically correct.

Summary

• On iOS 7, extra bar button padding is commonly adjusted with a fixed-space UIBarButtonItem.
• A negative spacer width moves the visible button closer to the screen edge.
• A custom UIButton inside a bar button item gives finer control than the default item.
• Keep the touch area usable even when tightening visual spacing.
• Revalidate the layout before reusing the same workaround on newer iOS versions.