Ion-nav-bar and ion-header-bar confusion


As I work on my app, new design and technical questions arise.

My app uses an ion-side-menus which has an ion-header-bar in the ion-side-menu-content and a left ion-side-menu.

Since I added new views, I’m facing navigation “issues” (not really issues at the moment, but will become issues later). I walked through the ionic’ doc and found the ion-nav-bar directive.

It makes what I want (back navigation button) but seems to have the same goal as ion-header-bar (both are headers, no?). My ion-header-bar has a left button (to open the left side menu) and a centered logo of the company.

I replaced the ion-header-bar with an ion-nav-bar. I can no longer have my menu button and the logo is covered by the ion-view title attribute that I gave.

The perfect header would be an ion-header-bar with my current menu button on the left and my centered logo. Followed by a sub-header which would include an ion-nav-bar displaying the current page title and, when needed, the back button (without hidden the menu button).

I tried in vain to create the header described above: one of them (ion-nav-bar or ion-header-bar) always covers the other.

My question is: is my (ideal) header achievable?

PS: I found yesterday this (Sub header navigation?) topic which is close to my request. I must say that with this various component, my lack of experience with Ionic and the doc which isn’t as easy to understand as some others (hope to help to improve it when I’ll be more capable!), I’m a bit confused sometimes…

Thank you in advance to any one who may help me! :smile:


Are you sure you don’t mean ion-nav-bar instead of ion-nav-view? The ion-nav-view simply holds the view. The ion-nav-bar functions as a header.

Is something like this what you are looking for:

Yup sorry @brandyshea!

It seems to work exactly as I want, I’ll adapt it in my app and keep you informed.

Thanks for your speed and efficiency.


Hi @brandyshea, it works perfectly well. It’s a way more simple than what I tried.

1 Like