247

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

20 Answers 20

651

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.

13
  • 29
    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; Jan 5, 2015 at 2:10
  • I need only one VC to have a transparent navbar. How do I revert to the original style after exiting that VC?
    – Guilherme
    Feb 6, 2015 at 19:16
  • 2
    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
    – dy_
    Mar 3, 2015 at 15:01
  • 1
    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.)
    – Henning
    May 11, 2016 at 15:58
  • 1
    You'll need navigationBar.standardAppearance.backgroundEffect = nil too in newer iOS verisons
    – Sam Soffes
    Feb 23, 2021 at 18:14
30

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];
1
  • 6
    In iOS 6 you will also want to remove the navigation bar shadow, otherwise it will look strange. [[UINavigationBar appearance] setShadowImage: [[UIImage alloc] init]];
    – Robert
    May 26, 2013 at 20:59
23

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];
0
17

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
        }
    }
}
2
  • Awesome! Was just searching for a fix! Works great! Thanks!
    – Georg
    Mar 26, 2020 at 15:30
  • 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.
    – nolanw
    Mar 4, 2021 at 21:22
14

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
1
  • 2
    navigationController is an optional property so you need to unwrap it. Simply add self.navigationController?.navigationBar and you are good to go Feb 6, 2015 at 9:56
10

This seems to work:

@implementation UINavigationBar (custom)
- (void)drawRect:(CGRect)rect {}
@end

navigationController.navigationBar.backgroundColor = [UIColor clearColor];
1
  • 6
    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.
    – Yang Meyer
    Dec 8, 2011 at 7:04
9

After doing what everyone else said above, i.e.:

navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .default)
navigationController?.navigationBar.shadowImage = UIImage()
navigationController!.navigationBar.isTranslucent = true

... my navigation bar was still white. So I added this line:

navigationController?.navigationBar.backgroundColor = .clear

... et voila! That seemed to do the trick.

5

I know this topic is old, but if people want to know how its done without overloading the drawRect method.

This is what you need:

self.navigationController.navigationBar.translucent = YES;
self.navigationController.navigationBar.opaque = YES;
self.navigationController.navigationBar.tintColor = [UIColor clearColor];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];
2
  • 1
    Im sorry, this isn't correct. You still have to override the drawRect method
    – Sander
    Jun 21, 2011 at 13:39
  • 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.
    – Cristi
    Dec 3, 2012 at 12:48
5

The below code expands upon the top answer chosen for this thread, to get rid of the bottom border and set text color:

  1. The last two coded lines of this code set transparency. I borrowed that code from this thread and it worked perfectly!

  2. The "clipsToBounds" property was code I found which got rid of the bottom border line with OR without transparency set (so if you decide to go with a solid white/black/etc. background instead, there will still be no border line).

  3. The "tintColor" line (2nd coded line) set my back button to a light grey

  4. I kept barTintColor as a backup. I don't know why transparency would not work, but if it doesn't, I want my bg white as I used to have it

    let navigationBarAppearace = UINavigationBar.appearance()
    navigationBarAppearace.tintColor = UIColor.lightGray
    navigationBarAppearace.barTintColor = UIColor.white
    navigationBarAppearace.clipsToBounds = true
    navigationBarAppearace.isTranslucent = true
    navigationBarAppearace.setBackgroundImage(UIImage(), for: .default)
    navigationBarAppearace.shadowImage = UIImage()
    
4

Solution - Swift 5 - iOS 13+

According to the documentation, in your UIViewController subclass:

override func viewDidLoad()
{
    super.viewDidLoad()
    
    let appearance = UINavigationBarAppearance()
    appearance.configureWithTransparentBackground()
    //appearance.backgroundColor = UIColor.clear
    
    navigationItem.compactAppearance = appearance
    navigationItem.scrollEdgeAppearance = appearance
    navigationItem.standardAppearance = appearance
    
    //...
}

Just to be clear, this makes the UINavigationBar completely transparent. The bar button items are still visible and work properly.

What didn't work

override func viewDidLoad()
{
    super.viewDidLoad()
    
    navigationController?.navigationBar.isTranslucent = true
    navigationController?.navigationBar.isOpaque = false

    //...
}

This made me realize I didn't actually know the difference between transparent and translucent RIP.

References

https://developer.apple.com/documentation/uikit/uinavigationcontroller/customizing_your_app_s_navigation_bar

https://www.lexico.com/en/definition/transparent

https://www.lexico.com/en/definition/translucent

Update 08/10/2021

Changing the navigationItem bar buttons after setting the appearance in the way I provided will reset the appearance and you'll have to do it again.

1
  • 1
    The solution availability is iOS 13+ (navigationItem.standardAppearance)
    – Dannie P
    Sep 9, 2021 at 17:11
3

for Swift 3.0:

override func viewDidLoad() {
    super.viewDidLoad()

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

C# / Xamarin Solution

NavigationController.NavigationBar.SetBackgroundImage(new UIImage(), UIBarMetrics.Default);
NavigationController.NavigationBar.ShadowImage = new UIImage();
NavigationController.NavigationBar.Translucent = true;
2

Try the following piece of code:

self.navigationController.navigationBar.translucent = YES;
1

Another Way That worked for me is to Subclass UINavigationBar And leave the drawRect Method empty !!

@IBDesignable class MONavigationBar: UINavigationBar {


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func drawRect(rect: CGRect) {
    // Drawing code
}}
1

In Swift 4.2

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

(in viewWillAppear), and then in viewWillDisappear, to undo it, put

self.navigationController?.navigationBar.shadowImage = nil
self.navigationController?.navigationBar.isTranslucent = false
1

This worked with Swift 5.

// Clear the background image.
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)

// Clear the shadow image.
navigationController?.navigationBar.shadowImage = UIImage()

// Ensure the navigation bar is translucent.
navigationController?.navigationBar.isTranslucent = true
0

Do you mean entirely transparent, or using the translucent-black style seen in the Photos app? The latter you can accomplish by setting its barStyle property to UIBarStyleBlackTranslucent. The former... I'm not sure about. If you want the items on it to still be visible, you might have to do some digging around in the bar's view hierarchy and remove the view containing its background.

1
  • 2
    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.
    – quano
    Feb 23, 2010 at 3:33
0

This works for Swift 2.0.

navigationController!.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
navigationController!.navigationBar.shadowImage = UIImage()
navigationController!.navigationBar.translucent = true
0

Check RRViewControllerExtension, which is dedicated on UINavigation bar appearance management.

with RRViewControllerExtension in your project, you just need to override

-(BOOL)prefersNavigationBarTransparent;

in you viewcontroller.

navigation bar tranparent

-1
extension UINavigationBar {
var isTransperent: Bool {
        get {
            return false // Just to satisfy property
        }
        set {
            if newValue {
                self.shadowImage = UIImage()
                self.isTranslucent = true
                self.setBackgroundImage(UIImage(), for: .default)
            } else {
                self.shadowImage = UIImage()
                self.isTranslucent = false
                self.setBackgroundImage(nil, for: .default)
            }
        }
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.