Adding ionic tab below subheader

ionic-v1
1

Hi Ionic team,

I am working on an Ionic & AngularJS project. As per the requirement I need to have a side-menu ,button-bar in the sub-header and tab-bar below the sub-header.
But when I use “tabs-top” it overlaps the button-bar.
Please help me with the issue…

2

Ionic generally follows platform specific UX so something like that would not be supported by ionic. Typically you would see the buttons in the header and top tabs right below in the subheader. Do you have any control of where the tabs go? Or is this a request from a client to put the tabs under a subheader? If possible I would try to stray them away from that idea and use the ionic top/bottom tabs design.

If you HAVE to implement tabs like this which I wouldn’t recommend, you could create a scss class such as…

.has-header-subheader-and-tabs {
  top: $bar-height + $bar-subheader-height + $tabs-height;
}

.platform-ios.platform-cordova {
    // iOS7/8 has a status bar which sits on top of the header.
    // Bump down everything to make room for it. However, if
    // if its in Cordova, and set to fullscreen, then disregard the bump.
   &:not(.fullscreen) {
       .has-header-subheader-and-tabs {
           top: $bar-height + $bar-subheader-height + $tabs-height + $ios-statusbar-height;
       }
   }
}

And add the .has-header-subheader-and-tabs class to your ion-content directive… Make sure you are importing ionic scss in your main scss file so you can use their variables listed above… This woulld only work if you use their ionic tabs css class rather than the actual directive. That’s why I wouldn’t recommend this

3

@djett Thank you for your reply,

I solved this issue by overriding the tabs-top properties in my custom css file

1 Like