How to make navigation bar transparent in iOS 7?

ios objective-c ios7 uinavigationbar transparent
user1244109 picture user1244109 · Dec 2, 2013 · Viewed 47.7k times · Source

Is there a way to make the bar of a navigation controller totally transparent?

What i've tried:

[self.navigationController.navigationBar setBackgroundColor:[UIColor clearColor]];
[self.navigationController.navigationBar setBarTintColor:[UIColor clearColor]];
[self.navigationController.navigationBar setAlpha:0.0];

but the bar's appearance does not change, and stays white translucent. I'm trying to get visible the bar items, but not the bar itself. Can someone point me in the right direction? Thanks

Answer

Pradhyuman sinh picture Pradhyuman sinh · Dec 2, 2013

If anybody is wondering how to achieve this in iOS 7, here's a solution (iOS 6 compatible too)

[self.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
self.navigationBar.shadowImage = [UIImage new];
self.navigationBar.translucent = YES;

Setting translucent to YES on the navigation bar does the trick, due to a behaviour discussed in the UINavigationBar documentation. I'll report here the relevant fragment:

If you set this property to YES on a navigation bar with an opaque custom background image, the navigation bar will apply a system opacity less than 1.0 to the image.

Reference from: Make UINavigationBar transparent

Related questions

IOS 7 Navigation Bar text and arrow color

I want to set background for Navigation Bar to be black and all colors inside it to be white. So, I used this code : [[UINavigationBar appearance] setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys: [UIColor whiteColor], NSForegroundColorAttributeName, [UIColor whiteColor], NSForegroundColorAttributeName, [NSValue valueWithUIOffset:UIOffsetMake(0, -1)], NSForegroundColorAttributeName, […

Read More
How to prevent UINavigationBar from covering top of view in iOS 7?

After updating to Xcode 5, the navigation bars in all of my app's views have shifted down. Here are some screenshots, the first showing everything in the view as it's pulled down, and the second showing all of it untouched. The …

Read More
Imitate Facebook hide/show expanding/contracting Navigation Bar

In the new iOS7 Facebook iPhone app, when the user scrolls up the navigationBar gradually hides itself to a point where it completely vanishes. Then when the user scrolls down the navigationBar gradually shows itself. How would you implement this …

Read More