How to alter ionic's nav-bar size?

19,386

Solution 1

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>

Solution 2

You just have to override the default style of ionic. You can achieve this by adding the following lines in your styles.css:

.bar-header {
   height: 70px; /*just an example*/
}

To vertically align the title of your page also add this:

.bar-header .title {
   line-height: 70px;
}

And finally to adjust the content of the page:

.has-header {
   top: 70px;
}

Solution 3

Best way to do it is to use Sass (.scss instead of .css) and override the default value for the variable $bar-height on index.scss.

$bar-height: 80px;

@import "../../bower_components/ionic/scss/ionic.scss";

/* Your css here */
Share:
19,386
David Prieto
Author by

David Prieto

Computer engineer student from Universidad Simon Bolivar, Venezuela.

Updated on June 05, 2022

Comments

  • David Prieto
    David Prieto over 1 year

    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?

  • Sebastian
    Sebastian almost 8 years
    this should be the accepted answer for its simplicity and well explained.
  • Alejandro Lora
    Alejandro Lora over 7 years
    Hi @Nikola I just saw your answer and I tried unsuccessfully, Could you please take a look to my question? I'd appreciate it, thanks ! stackoverflow.com/questions/35439595/…
  • LarsBauer
    LarsBauer over 7 years
    @AlejandroLora Have you tried my approach described below?
  • Alejandro Lora
    Alejandro Lora over 7 years
    @QueryLars Yes, and it doesn't work. I fixed yesterday evening, using margin-top instead increase the top property. So, I had top: 44px, I wanted top: 66px, So I add a margin top with 22px and it is working perfectly on iPad. thanks!