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!
Corin
July 5, 2016, 4:20am
25
Tried and not working for me. Any working example?
:S
Did you check out the example in the blog about this release? You can find it over here . Good luck @Corin
Corin
July 6, 2016, 8:44pm
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.
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
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.
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 ?
Guys who have solved this issue can you please create a codepen please. It will be very helpful for many developers.
Thanks
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.
Corin
September 5, 2016, 9:24pm
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!!
1 Like
apreg
September 25, 2016, 9:05am
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:
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:
[image]
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…
1 Like
vsecco
November 7, 2016, 11:09am
36
Hi, can you help me?
I’m using beta 11, and your solution not working, i don’t know why.
Thx
apreg
November 7, 2016, 11:29am
37
I will be available 4 hours later and then we can take a look at it
1 Like
**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
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.
1 Like
Looks pretty damn nice does two combined :-).
Apply “custom-class-name ” in ion-header tag :
Apply this class in your scss file:
.custom-class-name {
.toolbar{
.toolbar-background {
background: transparent;
}
}
ion-icon{
color: color($colors, YOUR_COLOR_APPLIED_IN_variables.scss_FILE);
}
.toolbar-title{
color : color($colors, YOUR_COLOR_APPLIED_IN_variables.scss_FILE);;
}
&:after {
height: 0 !important;
}
}
1 Like
Awesome, Thank you buddy, works like a boss
I replaced:
color: color($colors, YOUR_COLOR_APPLIED_IN_variables.scss_FILE);
with
background-image: url(’…/assets/img/image_name.png’);