How to alter ionic's nav-bar size?
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 */
David Prieto
Computer engineer student from Universidad Simon Bolivar, Venezuela.
Updated on June 05, 2022Comments
-
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 almost 8 yearsthis should be the accepted answer for its simplicity and well explained.
-
Alejandro Lora over 7 yearsHi @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 over 7 years@AlejandroLora Have you tried my approach described below?
-
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!