Menu
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?
918
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;
}
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>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 */
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
