Tabs don't blend with header


The tabs don’t seem to blend with the header.

I also have a problem with the reset button in the header. It doesn’t get aligned to the right of the title in the header


for the reset button use this <ion-nav-buttons side="right">
for the other thing im not sure what you want to archive?!


If you see the ionic docs for tabs, there is a class caled “has-tabs-tops” that if you add will blend the header and the tabs together like in android.

And thanks for helping with the reset button. It worked. yay.!!


ah found the problem you have to add this class to your header not the tabs-bar!
see here:


It doesn’t seem to work. If you take a look at the screenshot I would have used angular directives and not div with classes “tabs” like in the codepen link


hm changed to ion-tabs and ion-tab and it does work:
what did you do?

remember has-tabs-top has to be on Header like

<ion-nav-bar class="nav-title-slide-ios7 bar-positive has-tabs-top">


ok so you have added the tabs-top thing only in your home template. That’s what is making the difference. or should i include the tabs code in all templates.?


yes in this codepen i added it only on home template.
coze it does not work when i put both in tabs.html template.

if you need it every where i would change code using html markup not angular.

i hope i could help.