How can I make the Navigation Bar transparent?

Question

How can I make this part of the app (the Navigation Bar) translucent? I don't want it to be fully transparent, I want it to show the website content's colours and be blurred.

Link with screenshot: iPhone 12 simulator with Navigation Bar Opaque

I have looked at tens of possibilities and none worked:

let bounds = self.navigationController?.navigationBar.bounds as CGRect!
let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))
visualEffectView.frame = bounds
self.navigationController?.navigationBar.addSubview(visualEffectView)
self.navigationController.navigationBar.translucent = YES;

I also tried:

let blurEffect = UIBlurEffect(style: UIBlurEffect.Style.dark)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = (self.navigationController?.navigationBar.bounds)!
    self.navigationController?.navigationBar.addSubview(blurEffectView)darkUIBlurEffect.Style

Also this:

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default) //UIImage.init(named: "transparent.png")
    self.navigationController?.navigationBar.shadowImage = UIImage()
    self.navigationController?.navigationBar.isTranslucent = true
    self.navigationController?.view.backgroundColor = .clear

And this:

self.navigationController?.navigationBar.isTranslucent = true

I also tried using the Main.storyboard's Attributes Inspector and ticked Translucent.

Attributes Inspector tab on Navigation Bar in Main.storyboard

No method worked. What should I do?

Does this answer your question? [transparent navigation bar ios](https://stackoverflow.com/questions/25845855/transparent-navigation-bar-ios) — Amr, Sep 06 '21 at 19:50
Does this answer your question? [how to get a blurred effect behind my UINavigationBar](https://stackoverflow.com/questions/37957071/how-to-get-a-blurred-effect-behind-my-uinavigationbar) — Björn, Sep 06 '21 at 20:02

score 0 · Accepted Answer · answered Sep 06 '21 at 22:15

0

Try this:

extension UIViewController {
    func blurNav(withAlpha alpha:CGFloat = 1.0 ) {
        let statusBarHeight = view.window?.windowScene?.statusBarManager?.statusBarFrame.height ?? 0
        let rect = navigationController?.navigationBar.bounds.insetBy(dx: 0, dy: -(statusBarHeight)).offsetBy(dx: 0, dy: -(statusBarHeight)) ?? .zero
        let blurView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
        blurView.frame = rect
        blurView.isUserInteractionEnabled = false
        blurView.alpha = alpha
        blurView.layer.zPosition = -1
        blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
        navigationController?.navigationBar.addSubview(blurView)
        navigationController?.navigationBar.sendSubviewToBack(blurView)
    }
}

Usage:

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    blurNav(withAlpha: 0.8)
}

answered Sep 06 '21 at 22:15

RTXGamer

3,215
6
20
29

Do I put the code in the first box in ViewController? – gt138 Sep 07 '21 at 06:55
@gt138 call the extension func in `viewdidappear` of any controller where you want the translucent background. – RTXGamer Sep 07 '21 at 07:18
I don't have a `viewDidAppear` in my controller. I only have `viewDidLoad`. If I add that under `super.ViewDidLoad()` , I get a compiler error `Declaration is only valid at file scope`. I also add the second code snippet and now I get `Cannot find blurNav in scope`. – gt138 Sep 07 '21 at 08:51
@gt138 thats a extension method, you can directly call the func after overriding viewdidappear in your controller class. Copy/paste the controller extension as it is in your codebase. – RTXGamer Sep 07 '21 at 09:56

How can I make the Navigation Bar transparent?

1 Answers1