Geek Answers Handbook

How to resize ion nav-bar?

The navigation bar comes with a default size for Android and another for iOS because of how the platforms work. I need to make nav-var bigger in the Android version for the required aesthetic purposes. Until now, I could only change the size of the text and color using CSS, but not the size of the bar itself.

Is it possible to change it or impossible to change by design?

+5
source share
3 answers

Of course, you can change any visual aspect in Ionic. Here is a working example from CodePen .

So, I added the class to the title and added the appropriate style. In addition, I added a CSS !important; rule !important; . The code copy inserted 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>
+6
source

You just need to override the default ion input style. You can achieve this by adding the following lines to styles.css :

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

To vertically align the page title, also add this:

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

And finally, customize the content of the page:

 .has-header { top: 70px; }
+21
source

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

 $bar-height: 80px; @import "../../bower_components/ionic/scss/ionic.scss"; /* Your css here */
+3
source

More articles:


All Articles