# How can I make a transparent toolbar? **URL:** \ **Category:** ionic-v3\ **Created:** [March 14, 2016, 5:33pm UTC](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401 "2016-03-14T17:33:45Z")\ **Posts on this page:** 20\ **Page:** 2
**Author:** ![codestroyer](https://avatars.discourse-cdn.com/v4/letter/c/58956e/32.png) [@codestroyer](https://forum.ionicframework.com/u/codestroyer)\ **Post date:** [June 4, 2016, 12:09am UTC](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401/21 "2016-06-04T00:09:34Z")
@flavordaaave I used your method to achieve similar result and it works, however it applied to every tabs (pages). For my design, I only wanted this effect (transparent navbar and full screen content) on one page. Any suggestion? I am working to apply similar rules you had within my page scss classes to keep it modulated, no luck so far. Any help or suggestions would be appreciated, thanks. ---
**Author:** ![flavordaaave](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/flavordaaave/32/7301_2.png) [@flavordaaave](https://forum.ionicframework.com/u/flavordaaave)\ **Post date:** [June 6, 2016, 4:09pm UTC](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401/22 "2016-06-06T16:09:43Z")
@codestroyer you can achieve that by wrapping all the styles inside an extra class (e.g. ‘.fullscreen’) and then dynamically apply that class to your body on pageEnter/pageLeave. So in your the styles could be: ```auto .fullscreen { 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 + 20px; // extra padding for the ios statusbar padding-bottom: $toolbar-ios-height; // Padding for the Tabbbar (only needed if tabbar is used) } } ``` and then on the page where you want to apply the effect add something like this: ```auto onPageWillEnter() { document.body.classList.add('fullscreen'); } onPageWillLeave() { document.body.classList.remove('fullscreen') } ``` ---
**Author:** ![codestroyer](https://avatars.discourse-cdn.com/v4/letter/c/58956e/32.png) [@codestroyer](https://forum.ionicframework.com/u/codestroyer)\ **Post date:** [June 7, 2016, 5:32pm UTC](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401/23 "2016-06-07T17:32:14Z")
Thanks @flavordaaave, it works! ---
**Author:** ![luukschoen](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luukschoen/32/98585_2.png) [@luukschoen](https://forum.ionicframework.com/u/luukschoen)\ **Post date:** [June 29, 2016, 11:20am UTC](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401/24 "2016-06-29T11:20:39Z")
The suggestion was awesome, but is no longer needed as of BETA 10. Two of the breaking changes mentioned: ion-content now takes up 100% of the viewport height, but it has margin added to the top and bottom to adjust for headers, footers, and tabs. ion-content now accepts fullscreen as an attribute to to tell the content to scroll behind the header. This allows for transparent toolbars and tab pages without navbars! So… finally without to many hassle a transparent navigation! ---
**Author:** ![Corin](https://avatars.discourse-cdn.com/v4/letter/c/6de8d8/32.png) [@Corin](https://forum.ionicframework.com/u/Corin)\ **Post date:** [July 5, 2016, 4:20am UTC](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401/25 "2016-07-05T04:20:10Z")
Tried and not working for me. Any working example? :S ---
**Author:** ![luukschoen](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luukschoen/32/98585_2.png) [@luukschoen](https://forum.ionicframework.com/u/luukschoen)\ **Post date:** [July 6, 2016, 6:36am UTC](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401/26 "2016-07-06T06:36:25Z")
Did you check out the example in the blog about this release? You can find it over [here](http://blog.ionic.io/ionic-2-beta-10-is-live/). Good luck @Corin ---
**Author:** ![Corin](https://avatars.discourse-cdn.com/v4/letter/c/6de8d8/32.png) [@Corin](https://forum.ionicframework.com/u/Corin)\ **Post date:** [July 6, 2016, 8:44pm UTC](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401/27 "2016-07-06T20:44:20Z")
Thank you for your help @luukschoen, but its not exactly what I need. I need a full transparent header and I’ve tried to set some properties in the css without success. ☹ ---
**Author:** ![luukschoen](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luukschoen/32/98585_2.png) [@luukschoen](https://forum.ionicframework.com/u/luukschoen)\ **Post date:** [July 8, 2016, 7:45am UTC](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401/28 "2016-07-08T07:45:08Z")
Do you want the ionic header to be transparent or the statusbar? I should notice that the backdrop filters only work on safari now. If you just want it transparent, use an rgba or something like that 🙂 ---
**Author:** ![laurentc](https://avatars.discourse-cdn.com/v4/letter/l/bc79bd/32.png) [@laurentc](https://forum.ionicframework.com/u/laurentc)\ **Post date:** [August 11, 2016, 8:33pm UTC](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401/29 "2016-08-11T20:33:07Z")
Hi, Is the example in the blog about the beta 10 release still working in beta 11 ? Because it’s not for me 😕 I’ trying to get only the ion-toolbar transparent but nothing happens ! I have the same header organisation as the example. Thanks for your help. ---
**Author:** ![laurentc](https://avatars.discourse-cdn.com/v4/letter/l/bc79bd/32.png) [@laurentc](https://forum.ionicframework.com/u/laurentc)\ **Post date:** [August 12, 2016, 11:38pm UTC](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401/30 "2016-08-12T23:38:35Z")
Ok the example is working, but I “just” want a transparent sub-header (no scroll), and to see my google maps under it. How can do that ? ---
**Author:** ![developersnepal](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/developersnepal/32/100506_2.png) [@developersnepal](https://forum.ionicframework.com/u/developersnepal)\ **Post date:** [August 15, 2016, 10:51am UTC](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401/31 "2016-08-15T10:51:22Z")
Guys who have solved this issue can you please create a codepen please. It will be very helpful for many developers. Thanks ---
**Author:** ![rramirezz](https://avatars.discourse-cdn.com/v4/letter/r/c77e96/32.png) [@rramirezz](https://forum.ionicframework.com/u/rramirezz)\ **Post date:** [September 4, 2016, 10:25pm UTC](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401/33 "2016-09-04T22:25:43Z")
I did this and it worked for me. you can check my code here: [http://codepen.io/rramirezz/pen/PGwGGq](http://codepen.io/rramirezz/pen/PGwGGq) @Corin maybe this is what you are looking for, try and let me know if this works for you too. ---
**Author:** ![Corin](https://avatars.discourse-cdn.com/v4/letter/c/6de8d8/32.png) [@Corin](https://forum.ionicframework.com/u/Corin)\ **Post date:** [September 5, 2016, 9:24pm UTC](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401/34 "2016-09-05T21:24:14Z")
Thank you for your help @rramirezz Heyy, this way is working: ``` .mypage { ion-header::after { background: transparent; background-image: none !important; } .toolbar { .toolbar-background{ background: transparent; } } } ``` Thank you!! ---
**Author:** ![apreg](https://avatars.discourse-cdn.com/v4/letter/a/fbc32d/32.png) [@apreg](https://forum.ionicframework.com/u/apreg)\ **Post date:** [September 25, 2016, 9:05am UTC](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401/35 "2016-09-25T09:05:32Z")
I’m using beta.11 and this worked for me: ``` ``` Since fullscreen peroperty does not work on ion-content I still need to apply some sort of hacks like this here: > [@Ion-content: fullscreen with no marginTop/paddingTo](https://forum.ionicframework.com/t/ion-content-fullscreen-with-no-margintop-paddingto/61166): > > Hey guys, I am trying to set no top margin on the ion-content element. The goal is to create a transparent header bar that will be opaque after scrolling: the ion-content computes automatically the margin-top and/or the padding-top property. [image] With ionic 1, this could be simply achieved with: contentElem.style.top = 0; With ionic 2, the ion-content overrides any provided value (via javascript or css): this.ionContentElement.style.setProperty('margin-top', '0px', 'important… ---
**Author:** ![vsecco](https://avatars.discourse-cdn.com/v4/letter/v/cab0a1/32.png) [@vsecco](https://forum.ionicframework.com/u/vsecco)\ **Post date:** [November 7, 2016, 11:09am UTC](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401/36 "2016-11-07T11:09:24Z")
Hi, can you help me? I’m using beta 11, and your solution not working, i don’t know why. Thx ---
**Author:** ![apreg](https://avatars.discourse-cdn.com/v4/letter/a/fbc32d/32.png) [@apreg](https://forum.ionicframework.com/u/apreg)\ **Post date:** [November 7, 2016, 11:29am UTC](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401/37 "2016-11-07T11:29:28Z")
I will be available 4 hours later and then we can take a look at it 😉 ---
**Author:** ![sahapramesh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sahapramesh/32/94546_2.png) [@sahapramesh](https://forum.ionicframework.com/u/sahapramesh)\ **Post date:** [December 26, 2016, 12:17pm UTC](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401/39 "2016-12-26T12:17:07Z")
``` **HTML** **SASS** [transparent-header-bg]{ .toolbar{ .toolbar-background{ background: none; border: none; margin: 0; } .toolbar-content{ ion-title { .toolbar-title{ color: $white; } } } } &+ion-content{ .fixed-content, .scroll-content{ margin-top: 0 !important; } } } ``` Try with this hope you’ll get navbar as you are looking for ---
**Author:** ![HsuanXyz](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hsuanxyz/32/108884_2.png) [@HsuanXyz](https://forum.ionicframework.com/u/HsuanXyz)\ **Post date:** [March 21, 2017, 2:09pm UTC](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401/40 "2017-03-21T14:09:15Z")
![Preview](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ionic2-transparent-bar/demo.gif?raw=true) > **[hsuanxyz/ionic2-transparent-bar](https://github.com/HsuanXyz/ionic2-transparent-bar)** > > A transparent bar DEMO in ionic2. Contribute to hsuanxyz/ionic2-transparent-bar development by creating an account on GitHub. ---
**Author:** ![jeneser](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jeneser/32/108035_2.png) [@jeneser](https://forum.ionicframework.com/u/jeneser)\ **Post date:** [April 1, 2017, 3:16pm UTC](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401/41 "2017-04-01T15:16:50Z")
Hi,all So awesome @HsuanXyz **I have a idea!** (thans @peterbetos @saademotion_dev) Firstly, Please _distinguish_ between **toolBar** and **statusBar**.The discussion hear is about toolBar. For transparent **toolbar** :You can simply add some styles in your code. @luukschoen has given the answer . [ionic-2-beta-10](http://blog.ionic.io/ionic-2-beta-10-is-live/). The first way： ```auto ... ... ``` ```auto .opaque { -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } .opaque .toolbar-background { background-color: rgba(#f8f8f8, 0.55); } ``` The second way： ```auto ... ``` ```auto .scroll-content { margin-top: 0 !important; } ion-header, .toolbar-background { background-color: initial !important; // background-color: rgba(0,0,0,0) !important; &:after { height: 0 !important; } } ``` That’s ok! * * * If you are confused.and If you want a Translucent **statusBar** for android.Look at the following demo.Here Mixed with statusBar and toolbar. ![image](https://github.com/jeneser/jeneser.github.io/blob/master/assets/images/ionic2-super-bar-demo.gif?raw=true) > **[jeneser/ionic-super-bar](https://github.com/jeneser/ionic-super-bar)** > > ionic-super-bar - Transparent statusBar and awesome toolBar DEMO in ionic ---
**Author:** ![luukschoen](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luukschoen/32/98585_2.png) [@luukschoen](https://forum.ionicframework.com/u/luukschoen)\ **Post date:** [April 1, 2017, 3:17pm UTC](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401/42 "2017-04-01T15:17:59Z")
Looks pretty damn nice does two combined :-). [Previous page](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401.md?page=1) [Next page](https://forum.ionicframework.com/t/how-can-i-make-a-transparent-toolbar/46401.md?page=3)