Help setting avatar as a nav-button

ionic-v1
1

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="https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png"></a>
  </ion-nav-buttons>

image

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;">
2

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 {
  padding:0;
  margin:0;
  position:absolute;
  top:0;
}
2 Likes
3

Thanks! Ionic 101 I guess :wink: