I'm using the Ionic framework for a project I'm working on, but I'm having trouble positioning multiple Ionic nav buttons next to each other in the ionic nav bar and found nothing online to solve this problem.
This is the html (2 ionic nav buttons)
<ion-nav-bar class="bar-dark">
<ion-nav-buttons side="right">
<button class="button button-clear button-positive">about</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-balanced"><i class="icon ion-compose"></i>contact</button>
</ion-nav-buttons>
</ion-nav-bar>
I'm not sure how whether ionic allows both buttons to have the "right side" attribute, but it seems like it doesn't work. Does anyone know how to position those buttons next to each other toward the middle-right side of the nav bar while maintaining Ionic's responsive design? Any help is appreciated. Thanks.
You need to group them into the same ion-nav-buttons
<ion-nav-bar class="bar-dark">
<ion-nav-buttons side="right">
<button class="button button-clear button-positive">about</button>
<button class="button button-balanced"><i class="icon ion-compose"></i>contact</button>
</ion-nav-buttons>
</ion-nav-bar>