Can an Avatar be placed inside a nav bar?

ionic-v1
1

Hi Guys

Need some advise on placing Avatar within Nav Bar.
Here is what I am currently trying:

<ion-nav-bar class="bar-positive">

      <div class="item item-avatar">
            <img src="src">
           
            <h3>{{FullName}}</h3>
      </div>
</ion-nav-bar>

This is how it currently look like: Notice how the image is partially hanging below the nav bar.
image

Any help would be appreciated.

Thanks in advance!

Cheers
Saurabh

2

You can do it with something like this.
HTML:
<img class='nav-avatar' src="src">

CSS:

img.nav-avatar{ height: 35px; width: 35px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
Example:

3

This is really helpful…
I hope you can now help me get rid of the text “Back” appearing next to the image.
image

Thank You!

4

in your app.js you can add configuration to remove the text.

@App({
template: ‘<ion-nav [root]=“rootPage”>’,
config: {
backButtonText: ‘’
}
})

view here for more config options

5

@MagicAardvark the solution that you gave is for ionic 2.
And for ionic 1 he can add this to app.js file:
$ionicConfigProvider.backButton.previousTitleText(false).text('');

6

@haytam thanks this worked.

Cheers
Saurabh

1 Like