How to remove default title of the ion-tabs?

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?

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>

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

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

Can you show me the screen shot?


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

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>
      <h1 class="title">header
      <div class="buttons">
        <button class="button button-clear ion-chevron-right"></button>

And I added this code but nothing change.

  display: none;

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?

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

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.

Sorry but I can’t. Could you please use this and help me to remove that header bar?

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

<ion-view hide-nav-bar="true">

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

Try this {
      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