Adding a "Hero Panel"

Have a look at the picture I attached. This is what I am trying to achieve.image
To be more exact:

(Just with the header bar intact).

The only place I found to place something between the header-bar and the tabs was in the index.html, immediately after </ion-nav-bar>. Problem is, I need to be able to control what’s in the container based on the view I am on.

How would I go about implementing this?
Also, since this is a pretty common layout, wouldn’t it make sense to add a feature like this to the main release?

The area for the content in an app is between header and footer.
If you build an Ionic app with header and a tab-bar, Ionic generate depending on the platform.
For IOS the tab-bar is always on the bottom.
For Android the tab-bar is ontoo beneath the header.

Not quite. We are sticking to Google’s Material Design spec, so the app looks the same on both platforms.

Populating the panel with content is not an issue I think. I just need to have a div sitting there, between the header and top-tab-bar, showing on certain routes.

This is what I do:

<ion-pane class="hero-div"></ion-pane>
<ion-content class="with-hero"></ion-content>

.hero-div {
    position: absolute;
    top: 44px;
    height: 100px;

.with-hero {
    top: 144px !important;

It feels like a dirty and very fragile trick and I’d like it if there was some better way, but it works for me.

You might need to experiment with values a bit depending if you have statusbar shown or hidden, etc.

So from the sound of things, you want to be abel to have text and a search bar in your main nav-bar?

Try this