Ionic Cover Header

Ionic Cover Header

Amazing profile/details page with cover pictures for your app


Iclic Labs

Iclic Labs

Member since 2014


iOS, Android  
6 years ago
4 years ago
cover header, cover, profile page, profile, details, header, facebook, airbnb, play store, food, dish, ,

Thanks to all of you who have downloaded this plugin! Please consider leaving a rating and review, it would be really helpful to get your feedbacks. Thanks.


Plugin by


Ionic Cover Header allows you to add a transparent nav bar to your profile and details pages easily. The nav bar will automatically become opaque as you scroll down the page. You can simply reproduce the design of the amazing details pages of the facebook app, airbnb app or even the play store app.

Test Before You Buy

You can test the app using Ionic View and enter the app id 797ecd0e.


  1. Works with iOS, Android and Windows Phone.
  2. Works for user profile pages, product details pages, etc.
  3. Easy to include in your existing app.
  4. The directive is very easy to use.
  5. Compatible with your existing code.
  6. Works with ion-header-bar and ion-nav-bar
  7. It comes with all 4 examples
  8. This component has well structured html, css and js files and is heavily commented, so that it is easy to edit, add your style, etc.


  1. Copy the lib/ion-cover-header/ion-cover-header.js into your lib folder
  2. Update your index.html to include the lib/ion-cover-header/ion-cover-header.js file
  3. Update the app.js file and add dbaq.ionCoverHeader to the list of modules, i.e. angular.module('starter', ['ionic', 'dbaq.ionCoverHeader'])

That's all!


  1. in your profile view, add ion-cover-header="220" to your ion-pane or ion-view, the parameter is the height in pixel when the header must be opaque

That's all. Here is an example of a view:


  <!-- regular ionic header bar -->
  <ion-header-bar class="bar-balanced playstore-header">
    <div class="buttons">
      <a class="button button-icon ion-arrow-left-c" ui-sref="home"></a>
    <h1 class="title">Facebook</h1>
    <div class="buttons">
      <a class="button button-icon ion-ios-search"></a>
      <a class="button button-icon ion-android-more-vertical"></a>
  <!-- end of ionic header bar -->

    <img class="cover-img" src="img/facebook_cover.jpg"/>

    <div class="row">
      <div class="col">
        <img class="logo-img" src="img/facebook_logo.png"/>
      <div class="col col-75">
        <b>Facebook</b><br />
        Facebook<br />


Other Popular Plugins:

  1. Ionic Categories: Ionic v2.x/v3.x
  2. Ionic Passcode Square: Ionic v2.x/v3.x
  3. Ionic Passcode Flat: Ionic v2.x/v3.x
  4. Ionic Passcode Round: Ionic v2.x/v3.x
  5. Ionic Shrinking Header: Ionic v2.x/v3.x
  6. Ionic Material Sidemenu: Ionic v2.x/v3.x
  7. Ionic Walkthrough: Ionic v2.x/v3.x
  8. Ionic Contacts Inviter: Ionic v2.x/v3.x
  9. Ionic Cover Header: Ionic v1.x - Ionic v2.x/v3.x
  10. Ionic Profile Header: Ionic v2.x/v3.x
  11. Ionic Numeric Keyboard: Ionic v1.x - Ionic v2.x/v3.x
  12. Ionic Phone Number Validator: Ionic v1.x
  13. Ionic Cover Item: Ionic v1.x
  14. Ionic Timer: Ionic v1.x

Need Custom Work?

If you need help with your Ionic apps, if you need a specific plugin or integration. Let's get in touch. I'll be glad to develop or advise you for your app! Email me at