Help setting avatar as a nav-button


Hey there,

Any advice on how to set the user’s avatar as a nav-button (right and top aligned)?

This is where I’m at:

  <ion-nav-buttons side="right">
	<a href="#/account/profile"  class="item-avatar-right" ><img ng-src=""></a>

Also as I’m new to Ionic how do I fine tune element alignments, padding, margin, etc? Inline styling doesn’t seem to have any effect.

  <ion-nav-buttons side="right">
	<a href="#/account/profile"  class="item-avatar-right" style="padding:0; margin:0; position:absolute; top:0;">


When you use directives, often enough they create new elements of the ones you add, and often enough some values are not copied. Explore the DOM to see what I mean. Your best bet for styling is instead to override the CSS. To get your styles in effect the following CSS should do the trick:

ion-header-bar .buttons-right .item-avatar-right {


Thanks! Ionic 101 I guess :wink: