How to remove has-header and has-tabs-top?


I’m using Ionic 1.3.2 and build it to Android platform, but its put has-header and has-tabs-top into a <ion-content> automatically. I want to know how could I do remove this or there’s another solution ?


Hey @fernandopaiva you have to remove ion-header-bar below code

   <ion-header-bar class="bar bar-header  App-header">
<ion-content class="has-header">

from your .html file from www\templates folder.


@PremAgrawal but I haven’t . I will post all code that I’m trying if you can help me I will glad.


<body ng-app="starter" ng-controller="MainCtrl" animation="slide-left-right-ios7">

             <!-- The nav bar that will be updated as we navigate -->
              <ion-nav-bar class="bar bar-header bar-assertive" align-title="center"> 

              <!-- where the initial view template will be rendered -->


<ion-side-menus ng-controller='CtrlSideMenu' data-ng-init="loadImage();">
  <!-- Center content -->
	  <ion-nav-bar class="bar bar-header bar-assertive" >

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">

    <ion-nav-view name="tabsContent" class="has-header"></ion-nav-view>

  <!-- Left menu -->
  <ion-side-menu side="left">
          <div class="row">
            <div class="col col-90 text-center">        
                <img ng-src="{{imageURL}}" class="round_image">
          <div class="row">
            <div class="col col-90 text-center customTitle">{{nome}}</div>
    <ion-content style="margin-top:200px;">
        <ion-item menu-close href="#/app/search">
        <ion-item menu-close href="#/app/browse">
        <ion-item menu-close href="#/app/playlists">

	<ion-footer-bar class="bar bar-footer">
        <h6>Desenvolvido por Iguana Sistemas</h6>        




<ion-view view-title="MeuPedido" align-title="center">

	<ion-tabs class="tabs-top tabs-stable"> 
		  <ion-tab icon="icon ion-fork" title="Empresas">
		    <ion-nav-view name="tab-empresas" title="Empresas"></ion-nav-view>
		    <!--<ion-nav-view name="tab-produtos"></ion-nav-view>
		    <ion-nav-view name="tab-qtdProduto"></ion-nav-view>-->

		  <ion-tab icon="ion-ios-cart"                title="Carrinho"></ion-tab> 

empresas.html here is the problem on ion-content is adding automatically has-header and has-tabs-top


        <ion-item class="item item-thumbnail-left"
                  ng-repeat="empresa in empresas | filter:pesquisar" 
        		      ng-click="getEmpresa({{}})" >

              <img ng-src='{{empresa.imagem}}'>
              <h2 class="customTitle">{{empresa.razaoSocial}}</h2>

              <div style="margin-bottom:20px">
                  <li ng-repeat="ce in empresa.categorias | filter:pesquisar" 
                      class="customListInline customCategoriaEmpresa">{{ce.descricao}}</li>

              <div class="row row-bottom">
                  <div class="col col-25"><a href="#"><i class="icon ion-thumbsup icon-24px"></i></a></div>
                  <div class="col col-25"><a href="#"><i class="icon ion-chatbox icon-24px"></i></a></div>
                  <div class="col col-25">
                      <a href="tel:{{item.telefone}}"><i class="icon ion-ios-telephone icon-24px"></i></a>
        <ion-infinite-scroll on-infinite="loadMore();" distance="1%" ng-if='!moreData'></ion-infinite-scroll>


Look at the image below



Remove bar-header class from your index.html file and try again

<ion-nav-bar class="bar bar-header bar-assertive" align-title="center">


@PremAgrawal its works fine, thanks a lot. But now I have another problem, I’m using ion-nav-bar on index.html because before to enter inside app I have a screen to access that contain login from facebook or login from app and if I remove ion-nav-bar on index.html the header is not to shown and I want to show the header in this place without ion-side-menus and after make login the ion-side-menus is shown. Please, look at the image.

redirecting to ion-side-menus after login by facebook

//login by facebook
	function doLogin(Usuario){
			var status = parseInt(data.status);			
			if(status == 1){
				UserSessionFactory.setUserSession(, data.nome,, 
												  data.loginBy, data.idFacebook, data.imagem);				
				$state.go('app.tabs.empresas'); //call empresas
				${ template: data.msg, noBackdrop: true, duration: 2000 });
		.error(function(data, status){
			${ template: APP_MESSAGES.falhaLogin, noBackdrop: true, duration: 2000 });

Here my app.js

.state('main', {    
      url: "/main",
      templateUrl: 'templates/main.html',  
      controller: 'MainCtrl'

  .state('login', {
    url: '/login',
    templateUrl: 'templates/login.html',
    controller: 'UserCtrl'    

  .state('addUsuario', {
    url: '/addUsuario',
    templateUrl: 'templates/addUsuario.html',
    controller: 'UserCtrl'    

     url: '/app',
     templateUrl: 'templates/sidemenu.html',        

  .state('app.tabs', {
    url: '/tabs',
    views: {
      'tabsContent': {
         templateUrl: 'templates/tabs.html' 

  .state('app.tabs.empresas', {
    url: '/empresas',
    views: {
      'tab-empresas': {
        templateUrl: 'templates/empresas.html',
        controller: 'EmpresaCtrl'


You just have to code it in .html with out <ion-nav> & having has-header.


@PremAgrawal sorry, but I can’t understand your last suggestion. Please, can you explain me ?


What @fernandopaiva is referring to is that Ionic adds these classes behind the scenes. I am currentlyexperiencing the same behavior.