How can I make a transparent toolbar?

Ionic Framework ionic-v3
1

Like this image
https://d13yacurqjgara.cloudfront.net/users/376601/screenshots/1918715/profile_shot_1x.png

and profile page from this app (made with ionic 2) https://market.ionic.io/starters/caetano

3 Likes
2

You can override the toolbar background and make the header transparent in app/theme/app.variables.scss

$toolbar-background: transparent;
1 Like
3

The variable $toolbar-background makes the tab-bar color change

4

The second project don’t use the transparent toolbar.

You can overwrite css for any page or specific page, something…
.main-page or ion-page

.main-page {
  .toolbar {
    .toolbar-background {
      background: transparent;
    }
  }
}
5

This page uses, don’t?

1080×1920 183 KB

Thanks for the answer

6

Ok, I thought that using a black background.

So, the answer above.

7

This has no effect in my toolbar :disappointed:

Example of my code. (the code tag its not working right here).

image
example.png1031×460 35.8 KB

8

Just use the class u used in your HTML. Like this:

.navbar {
    .toolbar-background {
	    background: transparent;
    }
}

navbar class points to the class u assigned to the navbar directive. toolbar backgrounds sets the background color for this specific instance…

1 Like
9

:slight_smile: .main-page it is my custom class. You need use your class.

10

Thanks guys the toolbar is getting transparent, but not looks like the image above :sweat:
Thanks for helping

11

@gabrielmalinosqui what you’re asking for isn’t a transparent toolbar, but I guess you mean a transparent STATUSBAR. The style of the statusbar can be altered as well. Read the docs over here: docs to StatusBar. What you want is the statusbar overlaying the webview and then make the background color of the statusbar transparent. Set the color to white, since you’re looking for light content in the statusbar.

12

Hi @luukschoen, I really want a toolbar transparent, i want to make a background-image and toolbar transparent to looks like only one thing

Like this toolbar, did you see? The transparent toolbar

image
toolbar-transparent.png1056×228 20.4 KB

13

Yes, I understand your question, but I gave you the exact solution you’re looking for. You’re confusing two different things:

  1. the statusbar. This appears on top of your screen (with battery status etc.)
  2. the toolbar. This is your inapp navigation bar (or toolbar)

First you have to make your statusbar transparent. Therefore I refer to my previous post about the statusbar. Second, you have to make your navigation/toolbar transparent, which you already did as I can tell from your example. Then you can achieve the desired affect.

It’s also possible to just hide the Statusbar when you’ve opened your app. Import the right files and just call StatusBar.hide() method on startup. This will hide the statusbar, thus leaving you with only your own transparent toolbar.

14

The “problem” here is that the nav-bar, ion-content and a potentially used tab-bar are placed using css box model.
So even if you make the nav-bar transparent, it would NOT overlap your content (where you might have put your profile image).
As far as I can tell you’d need to change the content to be absolutely positioned and ranging from the very top to the very bottom.

15

@gabrielmalinosqui @flavordaaave Additionally, you can add the <preference name="Fullscreen" value="true" />preference to your config.xml. This stretches the content to your entire screen, regardless of the css box model. This triggers ‘immersive mode’ if possible and sets the content to the entire screen. You can do some reading about immersive mode over here.

16

Any updates on this thread?

17

@lianghua19 it depends, what kind of update are you expecting? I think all the possibilities are listed over here, you just have to implement them yourself :slight_smile:

18

Any news about how to make a header transparent in Ionic 2?

ion-navbar = transparent and content full-screen?

19

@Corin not sure what updates you’re expecting. This threat suggests several solutions from which you can try out and pick one that works for you :wink:

I personally used the approach I described further up: Using absolute position for header, content and potentially used tab-bar. For iOS I added the following to app.ios.scss file:

ion-navbar-section,
ion-tabbar-section,
ion-content-section {
  position: absolute;
  width: 100%;
}

ion-navbar-section {
  z-index: 1000;
  top: 0;
}

ion-tabbar-section {
  z-index: 1000;
  bottom: 0;
}

ion-content-section {
  z-index: 10;
}

scroll-content {
  padding-top: $toolbar-ios-height;
  padding-bottom: $toolbar-ios-height;
}

and then I added the transparent property to my header:

<ion-navbar *navbar transparent>
...
1 Like
20

Thank you for your help, but nothing is working for me. I’ve tried different ways, examples, etc. and no way, my header is not transparent and/or my content is not fullscreen, I always have a white bar…:frowning: