Transparent Navigation Bar but Keep iOS Blur

Question

In iOS 7 navigation bars have a blur effect for content that is scrolled underneath. I would like my navigation bar to be transparent, which is achieved like so:

[[UINavigationBar appearance] setBarStyle:UIBarStyleDefault];
[[UINavigationBar appearance] setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setShadowImage:[UIImage new]];
[[UINavigationBar appearance] setBackgroundColor:[UIColor  clearColor]];

But I would like the content to blur as well. I tried the following with no luck:

[[UINavigationBar appearance] setBarTintColor:[UIColor clearColor]];
        [[UINavigationBar appearance] setBarStyle:UIBarStyleDefault];
        [[UINavigationBar appearance] setShadowImage:[UIImage new]];
        [[UINavigationBar appearance] setBackgroundColor:[UIColor  clearColor]];

Instead, this makes the navigation bar blur the content view but is black. If I remove the setBarTintColor, the navbar blurs the content but it's white. I've tried various other combinations but the navbar is either white or black.

I've looked at several SO questions but they don't help me. They answer how to get a completely transparent navbar or get a certain colour, when all I want is it to be clear/transparent, without any kind of colour tint.

How would I achieve this? Thanks for any help, it's appreciated!

score 0 · Answer 1 · answered Dec 05 '14 at 10:47

Make it translucent.

Subclass it, and add the code -

- (id)initWithRootViewController:(UIViewController *)rootViewController
{
    if (self = [super initWithRootViewController:rootViewController]) {
        self.navigationBar.translucent = YES;
    }
    return self;
}

score 0 · Answer 2 · answered Dec 06 '14 at 16:37

Try this, it is based on the blurred transparency of ToolBar, you can also add some color to that bar: This solution is good of you need iOS7 support

[self.navigationController.navigationBar setBackgroundImage:[UIImage new]
                                              forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.shadowImage = [UIImage new];
self.navigationController.navigationBar.translucent = YES;
self.navigationController.view.backgroundColor = [UIColor clearColor];
UIToolbar* blurredView = [[UIToolbar alloc] initWithFrame:self.navigationController.navigationBar.bounds];
[blurredView setBarStyle:UIBarStyleBlack];
[self.navigationController.navigationBar insertSubview:blurredView atIndex:0];

Transparent Navigation Bar but Keep iOS Blur

2 Answers2