How to remove default title of the ion-tabs?

ionic-v1
1

I want to remove the default title of the ion-tabs, because it cost to much space and I can’t customize it for my use.
Any one did this before?

2

Use something like this

<ion-tab  class="tabs-icon-only" icon-off="ion-arrow-swap" icon-on="ion-arrow-swap" href="#/app/home">
    <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>

Here please note that tabs-icon-only is the class for the ion-tab.

3

Thanks but it does not work. I added tabs-icon only. But the title-bar still available on top.

4

Can you show me the screen shot?

5

image

6

Oh, you are referring to the header bar. tabs refer to the bottom tabs, where you have 6 icons with titles. So in order to remove the titles, then my previous solution works.
If you wish to remove the header bar itself, then you can say display:none css to the ion-header-bar.

I have another question. Are you using bothe header and subheader? Is the below one with color a subheader?

1 Like
7

I want to remove the header bar (this gen by ion-tabs).
The second is another header too.

    <div class="bar bar-header bar-calm">
      <div class="buttons">
        <button class="button button-clear ion-chevron-left"></button>
      </div>
      <h1 class="title">header
      </h1>
      <div class="buttons">
        <button class="button button-clear ion-chevron-right"></button>
      </div>
    </div>

And I added this code but nothing change.

.ion-header-bar{
  display: none;
}
8

Actually you are not using the ion-header-bar here. That’s the reason why there is no effect of your css. Could you please add a codepen here?

9

I don’t know how to use code pen with ionic framework, I put all I have to it.

10

In that code pen i can’t see anything. All you need to do is add the markup of that page along with the css and JS you have used.

11

Sorry but I can’t. Could you please use this http://codepen.io/mhartington/pen/MwPRNp and help me to remove that header bar?

12

OK. I found a solution for this. Just add an attribute like this:

<ion-view hide-nav-bar="true">
2 Likes
13

Could you please help me another problem. I want to change the default active color of the tab icon. Default is blue.

14

Try this

.tab-item.tab-item-active {
      border-color: black !important;
}

This also depends on the way u use the tabs. Few use ion-tab and few just use the classes. So once check the class that you are using and apply this css.

1 Like