Two ion-nav-bar on same page


I tried to add two consecutive ion-nav-bar on same viewport but it always coming to the top. any help would be appreciable.

I want to achieve this type of design, please have a look.


Any Idea on the above design, I am still in stuck with underneath navigation control, the secondary navigation bar does not come in the middle of a page, it always comes to top and override the main navigation control. Plz help me out of it.


this will not work with standard ionic app structure and components.
you could try to load an app in the app via iframe but thats not a good ux and ui…

Try to focus on the navigation structures users are knowing and keep your app simple…


Thanks for your reply.
Can we place the “ion-nav-bar” in the middle of the page and in header just placed a sub-header? I tried the same but still no luck.


In case of that stuff --> do not use ionNavBar and build your own navigation handling with $ionicHistory-Service --> check backviews to show custom backbutton and so on.


Thanks for your assistance.
Could you please make up one single page like that in codepane…that would be great help.