Header-bar and sub header

I have a side-menu controller that encompasses the entire contents of my app.
Inside I have header-bar, however under that header-bar I want to have a sub-header.

This is my code:

    <!-- Center content-->
    <pane side-menu-content nav-router>
        <!-- Define the header bar that will display todays date-->
            title="headerTitle" left-buttons="leftButtons"
            right-buttons="rightButtons" type="bar-stable"

        <!-- Subheader will display the control to select when we want to leave-->
        <div class="bar bar-subheader">
            <button class='button button-clear ion-ios7-arrow-left'></button>
            <h2 class="title">sub header</h2>
            <button class='button button-clear ion-ios7-arrow-right'></button>

        <!--Define where the content will be shown -->
        <content has-header="true" ng-controller="contentController" on-refresh="onRefresh()" has-bouncing="true" padded="true">
            <!-- for pull to refresh-->
            <!-- main content view-->

    <!-- left menu-->
    <side-menu side="left">

The issue this causes, is that the sub header overlaps the contents of the <ng-view> tag, forcing me to put a margin-top. However this is not an optimal solution, and it would be better if the sub header pushed the contents down instead of overlapping it.

Am I doing something wrong? Thanks in advance!

Content has a few option including a has-subheader=“true” option, which should resolve this. Be sure to include along with the has-header as well

worked like a charm! thanks :smile:
perhaps adding it as an attribute to the content documentation would help others in the future

Yeah it would be nice, the only reason I know of it was because it went digging in the css and saw a has-subheader class. You could always make a pull request on github to add it…

I just added a pull request for this. It will look like :

Two things I would change, mention that you must have the “has-header” option set to true in order for sub-header to work. Also, change padded to padding. Padded doesn’t work but padding does.

Good points. I never realized the docs were all wrong about padded. I’ll put together another pull request.

Two fixes for this :

Awesome! glad to see you guys are on top of that.
@Calendee I would also like to mention I found a broken link.,
on the page: http://ionicframework.com/docs/angularjs/views/header/
In the first paragraph: " Nav Router Controller" link is broken

That should just link to the Views and Navigation section. I believe its a relic to the old Ng-router before the switch to UI-router

Thanks @mlovekovsky I sent in a pull request for that.

Trying to add a bar-header with list underneath in a side menu, but the bar-header covers the first item. Any ideas?

<!--Right Notification Menu-->
<ion-side-menu side="right">
    <header class="bar bar-header bar-stable">
        <h1 class="title">Notifications</h1>
    <ion-content has-header="true">
                Message 1
                Message 2
                Message 3

You can see Message 1 is hidden here:

Assuming you are using Beta 1 here. If so, replace that <header> with an <ion-header-bar>.


1 Like

That did fix the list display issue, thanks! However, I have a left and right side menu (left for navigation, right for notifications). Adding this to the right side menu, now adds a header space to the left navigation that I don’t want :-(.


<!--Left Menu-->
<ion-side-menu side="left">
            <div ng-show="orgs">
                <ion-item nav-clear menu-close href="#/app/home">

That link doesn’t seem to work. There is a bug right now with headers messing up other views. That will be fixed pretty soon I’m sure.

So in beta1 we should use now ion-header-bar for both headers and sub headers? that was the only way i could get the padding for the list below work correctly.

Correct @michelhabib, so the markup should look like this

<ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">Left Button</button>
  <h1 class="title">Header</h1>
  <div class="buttons">
    <button class="button">Right Button</button>

<ion-header-bar align-title="left" class="bar-subheader bar-positive">
  <h1 class="title">Sub Header!</h1>


I’m using the tabs example app as starter. And I was struggeling to get my header showing.
Just using the starter app and included a header above the navbar.
The nav-bar was displayed on top of it. But after reading this topic and adding bar-subheader class to the ion-nav-bar and has-header and has-subheader to the ion-content everything is displaying correctly.
Except :slight_smile: the tab names are not beeing displayed in the navbar anymore.
Am I missing something?

Ion-nav-bar isn’t meant to be a subheader. You would want to use an ion-header-bar instead

hmm kinda feared that,
So if I want to display something above everything else including the nav bar and at all time. I can use a header and put the nav-bar in the ion-view? Or is there another way or another element I can use?
The app is used to start and stop processes and I want to show which proces is running at all time.