Positioning multiple Ionic nav buttons next to each other

ionic-v1
1

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.

2

I’m not sure what you mean exactly but I have a nav with two buttons next to each other on the right side. One is s settings button and the other a search. The html looks like this:

<ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
    <button class="button button-icon icon ion-search"></button>
    <button menu-toggle="right" class="button button-icon icon ion-settings"></button>

The settings button opens the right hand side menu, which is just a list of settings.

1 Like
3

That’s exactly what I meant. Thank you!

4

Did you solve the issue? Usually i use this syntax:

<ion-nav-buttons side="secondary">
    <button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
     <ion-nav-buttons side="primary">
         <button class="button button-icon icon ion-map"></button>
</ion-nav-buttons>

In this case, it shows a map button next to a navicon button…

1 Like