LS05
1
Hi. How can i make the header with transparent background?
I’m using it like this:
<ion-nav-bar type="bar-light"
animation="nav-title-slide-ios7"
back-button-type="button-icon button-clear"
back-button-icon="ion-ios7-arrow-back"
id="header{{sezione}}"></ion-nav-bar>
Thanks.
LS05
2
Sorry, dumb question. Just: background: none;
1 Like
Applying
background: none;
used to work in beta 13. But beta 14 had sweeping CSS animation changes and this doesn’t seem to work anymore.
Hi @kevinwu, if transparent means that the content can be seen below, you should just set two extra lines of CSS:
.bar.bar-light {
background-color: rgba(255,255,255,.66) !important; /* or transparent, or background:none */
}
.scroll-content {
overflow: visible !important;
}
3 Likes
haegyun
5
@xAlien95, Could I question one more?
In given code pen code, there is ion-header-bar, no ion-nav-bar.
And I’ve applied with your code into my ion-nav-bar, It is not works…
Is there another solution for navigation bar?
I’m using version of beta-14.
Just use this for transparent background:
<ion-nav-bar class="bar-clear">
...
</ion-nav-bar>
5 Likes
I am using 1.0 and class=“no-header” works: http://cl.ly/cj6W
franky
9
for ios, do the following:
.bar.bar-header h1 {
color: black !important;
}
.scroll-content {
overflow: visible !important;
}
.bar.bar-header {
background: rgba(255,255,255,.10);
border-bottom-width: 0;
}
.platform-ios.platform-cordova:not(.fullscreen) .has-header {
top:0px;
}
I guess the last rule is the key.
see more details on Creating a Transparent NavBar In Ionic Framework