Make UINavigationBar transparent

Question

How do you make a UINavigationBar transparent? Though I want its bar items to remain visible.

Solution 1

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

In Objective-C

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

In swift 3 (iOS 10)

self.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationBar.shadowImage = UIImage()
self.navigationBar.isTranslucent = true

In swift 2

self.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
self.navigationBar.shadowImage = UIImage()
self.navigationBar.translucent = true

---

Discussion

Setting translucent to YES on the navigation bar does the trick, due to a behavior 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.

Solution 2

In iOS5 you can do this to make the navigation bar transparent:

nav.navigationBar.translucent = YES; // Setting this slides the view up, underneath the nav bar (otherwise it'll appear black)
const float colorMask[6] = {222, 255, 222, 255, 222, 255};
UIImage *img = [[UIImage alloc] init];
UIImage *maskedImage = [UIImage imageWithCGImage: CGImageCreateWithMaskingColors(img.CGImage, colorMask)];

[nav.navigationBar setBackgroundImage:maskedImage forBarMetrics:UIBarMetricsDefault]; 
[img release];

Solution 3

From IOS7 :

self.navigationController.navigationBar.translucent = YES;
self.navigationController.navigationBar.shadowImage = [UIImage new];
self.navigationController.view.backgroundColor = [UIColor clearColor];
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];

Solution 4

If you build with the latest beta iOS 13.4 and Xcode 11.4, the accepted answer won't work anymore. I've found another way, maybe it's just a bug in the beta software, but I'm writing it down there, just in case

(swift 5)

import UIKit

class TransparentNavBar :UINavigationBar {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.setBackgroundImage(UIImage(), for: .default)
        self.shadowImage = UIImage()
        self.isTranslucent = true
        self.backgroundColor = .clear
        if #available(iOS 13.0, *) {
            self.standardAppearance.backgroundColor = .clear
            self.standardAppearance.backgroundEffect = .none
            self.standardAppearance.shadowColor = .clear
        }
    }
}

Solution 5

For anyone who wants to do this in Swift 2.x:

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.translucent = true

or Swift 3.x:

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true

View more solutions

Comments

[quano]

I mean the former. I tried making a category and overriding the drawRect method of UINavigationBar (invoking CGContextClearRect), but that made it completely black. The items were still visible though.

[Sander]

Im sorry, this isn't correct. You still have to override the drawRect method

[Yang Meyer]

It seems that in iOS 5 you must override -drawRect: in a subclass proper, not in a category, and then use this subclass as your navigation bar.

[Cristi]

Why is this wrong? It seems to be working in IOS 6 sim. It isn't working in IOS 5? navigationBar.backgroundColor seems to be undocumented.

[Robert]

In iOS 6 you will also want to remove the navigation bar shadow, otherwise it will look strange. [[UINavigationBar appearance] setShadowImage: [[UIImage alloc] init]];

[Johann Burgess]

Answering my own comment here; to undo the affect try:[self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage = nil; self.navigationController.navigationBar.translucent = NO;

[Daniel Galasko]

navigationController is an optional property so you need to unwrap it. Simply add self.navigationController?.navigationBar and you are good to go

[Guilherme]

I need only one VC to have a transparent navbar. How do I revert to the original style after exiting that VC?

[dy_]

to achieve this in Swift from within a ViewController, do it like this: self.navigationController?.navigationBar.setBackgroundImage(‌​UIImage(), forBarMetrics: UIBarMetrics.Default) self.navigationController?.navigationBar.shadowImage = UIImage() self.navigationController?.navigationBar.translucent = true

[Mahakala]

Works using appeareance as well (iOS7/8), see : gist.github.com/mpycio/ddbdea1adb6b86cf02f6

[jab]

If anyone is wondering, you can undo the effect in Swift the same way -- in spite of the fact the function takes UIImage! as an argument, sending nil works.

[user3099609]

Works with Appearance proxy in iOS 9

[Henning]

Undoing the effect for me only partially works. Because after I do this, my tableviews all have headers that are too large. App-wide, which is weird. (I only want this effect for one controller that I push on the stack.)

[jose920405]

if need a percentage how should be?

[ghr]

For me, in iOS9, and as mentioned lower down, remove 1 line (has no effect that I can see) and add another: [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault]; [self.navigationController.navigationBar setBackgroundColor:[UIColor clearColor]]; //self.navigationController.navigationBar.shadowImage = [UIImage new]; self.navigationController.navigationBar.translucent = YES;

[Iulian Onofrei]

Setting translucent to NO works for me in iOS 10.2

[Mario]

@Stone Currently struggling with exactly this issue, have you been able to solve it?

[Stone]

@Mario unfortunately no. Our workaround was to make the NavigationBar transparent by default and work with a background image. Have a look at this: stackoverflow.com/a/48691715/2307466

[Georg]

Awesome! Was just searching for a fix! Works great! Thanks!

[Sam Soffes]

You'll need navigationBar.standardAppearance.backgroundEffect = nil too in newer iOS verisons

[nolanw]

Thank you! Note that if you're already setting standardAppearance via UIAppearance, setting the backgroundColor/backgroundEffect/shadowColor as shown here may not work, because UINavigationBarAppearance properties do not work with UIAppearance. Instead, you need to make your own instance of UINavigationBarAppearance, set the properties as you like, then set navigationBar.standardAppearance = myNewInstance.

[Dannie P]

The solution availability is iOS 13+ (navigationItem.standardAppearance)