How can I make a transparent toolbar?

Ionic Framework ionic-v3
21

@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.

22

@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:

.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:

onPageWillEnter() {
  document.body.classList.add('fullscreen');
}

onPageWillLeave() {
  document.body.classList.remove('fullscreen')
}
23

Thanks @flavordaaave, it works!

24

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!

25

Tried and not working for me. Any working example?
:S

26

Did you check out the example in the blog about this release? You can find it over here. Good luck @Corin

27

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. :frowning:

28

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 :slight_smile:

29

Hi,
Is the example in the blog about the beta 10 release still working in beta 11 ?
Because itā€™s not for me :confused:
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.

30

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 ?

31

Guys who have solved this issue can you please create a codepen please. It will be very helpful for many developers.

Thanks

33

I did this and it worked for me.

you can check my code here: 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.

34

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!!

35

Iā€™m using beta.11 and this worked for me:

<ion-header no-shadow>
  <ion-navbar transparent>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
   </button>
 </ion-navbar>
</ion-header>
<ion-content>

Since fullscreen peroperty does not work on ion-content I still need to apply some sort of hacks like this here:

36

Hi, can you help me?
Iā€™m using beta 11, and your solution not working, i donā€™t know why.

Thx

37

I will be available 4 hours later and then we can take a look at it :wink:

39 
**HTML**
<ion-header transparent-header-bg></ion-header>

**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

40

Preview
demo.gif?raw=true800Ɨ468

41

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.

The first wayļ¼š

<ion-header class="opaque">
...
</ion-header>

<ion-content fullscreen>
  ...
</ion-content>

.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ļ¼š

<ion-header>
...
</ion-header>

.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

42

Looks pretty damn nice does two combined :-).