Transparent header bar not working

ionic-v1
1

I couldn’t find the option of a transparent header bar in the ionic framework so i created my own.

The problem is, in the browser it looks to be working fine, however when i upload the app and view it using the “Ionic View” app the transparent bar doesn’t work - it just displays a white bar across the top.

CSS:

/* Transparent Header Bar */
.bar.bar-transparent {
  background-color: rgba(255,255,255,0) !important;
  border-bottom: none;
  background-size: 100% 0px;
}

.bar.bar-transparent .button-clear.button-clear.light {
  color: #ffffff;
}

HTML

<ion-header-bar align-title="center" class="bar-transparent">
    <button class="icon ion-navicon-round button button-clear light pull-right"></button>
</ion-header-bar>

<ion-view view-title="Chats">
  <ion-content class="no-header">
     <!-- content here -->
  </ion-content>
</ion-view>

Any help would be greatly appreciated.

Thanks

2

Did you inspect on the device to see what actually gets rendered?

Android: http://docs.ionic.io/docs/chrome-inspector
iOS: http://docs.ionic.io/docs/safari-inspector

3

I put chrome://inspect into the chrome browser and it said “No Devices Detected”

How do you add a device to here?

I have inspected it in browser using the dev tools and it shows ok in there, just not using the “Ionic View” app.

Cheers

4

I don’t know if you can inspect on Ionic View app. Why not build your own app and try with that?

I put chrome://inspect into the chrome browser and it said “No Devices Detected” How do you add a device to here?

Use google for that. Basically: Activate developer mode in device, connect.

5

Hey, the bar-clear class acts as a transparent header bar. See this issue for more on this:

1 Like
6

Thank you, spent ages on this too dam :slight_smile:

7

I have tried the class bar-clear again seems to be fine in Browser, but when i view it in ‘Ionic View’ app its not transparent, it just displays a white bar at the top.

8

Did you try the suggestion in that post? Here:

9

I have same problem no working on device