David Prieto David Prieto - 4 months ago 53
CSS Question

How to alter ionic's nav-bar size?

The nav-bar comes with a default size for Android and another for iOS because of how the platforms work. I need to make the nav-var bigger in the Android version for required aesthetic purposes. So far I have been able to alter only the size of the text and the color with CSS but not the size of the bar itself.

Is it possible to change it or is unalterable by design?

Answer

Sure, you can change any visual aspect in Ionic. Here's a working example from CodePen.

So, I added the class to the header and added appropriate styling. Also, I added the !important; CSS rule. The code copy pasted from CodePen here:

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('page1', {
    url: '/1',
    templateUrl: 'page1.html'
  })
  .state('page2', {
    url: '/2',
    templateUrl: 'page2.html'
  })
  .state('page3', {
    url: '/3',
    templateUrl: 'page3.html',
    controller : "Page3Ctrl"
  })
  
  $urlRouterProvider.otherwise("/1");
})

.controller('Page3Ctrl', function($scope) {
  
})
.mynavbar{
  height: 200px !important;
}
<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Template</title>

    <link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
  </head>
  <body>

    <ion-nav-bar class="bar-positive nav-title-slide-ios7 mynavbar" align-title="center">
      <ion-nav-back-button class="button-icon ion-arrow-left-c">
      </ion-nav-back-button>
        <ion-nav-buttons side="left">
          <button class="button">
            LeftButton!
          </button>
        </ion-nav-buttons>        
        <ion-nav-buttons side="right">
          <button class="button">
            RightButton!
          </button>
        </ion-nav-buttons>        
      
    </ion-nav-bar>

    <ion-nav-view class="slide-left-right"></ion-nav-view>

    <script id="page1.html" type="text/ng-template">
      <!-- The title of the ion-view will be shown on the navbar -->
      <ion-view title="Page 1" hide-back-button="true">
        <ion-content class="padding">
          <!-- The content of the page -->
          <a class="button" ui-sref="page2">Go To Page 2</a>
        </ion-content>
      </ion-view>
    </script>    

    <script id="page2.html" type="text/ng-template">
      <!-- The title of the ion-view will be shown on the navbar -->
      <ion-view title="Page 2">
        <ion-content class="padding">
          <!-- The content of the page -->
          <a class="button" ui-sref="page1">Go To Page 1</a>
          <a class="button" ui-sref="page3">Go To Page 3</a>
        </ion-content>
      </ion-view>
    </script> 

    <script id="page3.html" type="text/ng-template">
      <!-- The title of the ion-view will be shown on the navbar -->
      <ion-view title="Page 3">
        <ion-content class="padding">
          <!-- The content of the page -->
          <a class="button" ui-sref="page1">Go To Page 1</a>
          <a class="button" ui-sref="page2">Go To Page 2</a>
        </ion-content>
      </ion-view>
    </script>     
  </body>
</html>