Trouble customizing ion-nav-bar

ionic-v1
1

Hello, I was trying to customize a ion-nav-bar, so far unsuccessfully. I’ve tried to apply css to the ion-nav-bar, however in this case putting a height and a border creates this effect where the bar doesn’t seems to contain its elements.

Html:

<ion-view  title="<span class='arch'>BLA</span><span class='app'>BLA</span>">

css:

.bar.bar-stable .title{
    width: 100%;
    height: 110px;
    border: 5px solid red;
}

And the result:

image
Screen Shot 2014-12-17 at 12.28.18.png1540×179 6.67 KB

Can you help me understand the basics? Is there any way to transclude element in ionic nav bar beside in the title? Is it possible to extend the navbar directive maybe? I’m new to ionic but have a basic knowledge of angular.

Thanks!

2

Hey there you can take a look in the generated dom-code.

the ion-navbar contains an ion-header-bar where the title is set.

3

@bengtler thank you very much. So is it possible to specify a custom nav-header-bar? How?

1 Like
4

Take a look at ion-nav-title. It accepts HTML : http://ionicframework.com/docs/api/directive/ionNavTitle/