Adding a button to the navbar in place of the back button

On a specific page I need a “+” icon on the left corner of the navbar generally where the back button appears when there is a previous page in the nav stack. I added an icon on the left edge with this code:

      <button ion-button icon-only>
        <ion-icon name="ios-add"></ion-icon>


    <ion-buttons end>
      <button ion-button menuToggle icon-only>
        <ion-icon name="menu"></ion-icon>

The icon “+” appears, but exactly at the same place back button would appear, it is more to left as compared to the menu button on the right it has a good space from its edge.

See this screenshot,

The “+” button is on inside the toolbar-content but menu is out of it. I have both the ion-buttons element inside of ion-navbar still the button on the left somehow is pushed inside of toolbar-content container

How do I make sure that a button on the left is position in the DOM exactly like the button on the right so the padding / margin and any spacing is consistent.

ion-buttons start doesn’t do it?

No, instead it pushes the button that’s supposed to be on the left to right next to the menu button.

Are you sure? Maybe your sass is odd? That doesn’t happen to me when I use start and end on the same navbar.

I put them both under the title, by the way, not that it should make a difference.

    <ion-buttons start>buttons here</ion-buttons>
    <ion-buttons end>more buttons here</ion-buttons>

Running it in iOS platform works as expected, the buttons stays on the start with the start attribute, doesn’t work on MD.

The only modification I made was centering the text for the title in MD, but even after removing that specific style the button doesn’t stay on the left with start

Ok, inspecting the HTML I found this

.bar-buttons-md {
    /* -webkit-box-ordinal-group: 5; */
    -ms-flex-order: 4;
    /* order: 4; */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

This is something Ionic adds, removing the flex-order properties pulls the start buttons to the left. Any idea what SCSS variables I need to work on to change the order of buttons?

I’ve never used it myself, but you might want to play with $toolbar-order-md. I’d be interested to know what happens.

1 Like

Yes! That’s it,

Default order for toolbars’ buttons and content was

$toolbar-order-md	(
  back-button: 0,
  menu-toggle-start: 1,
  buttons-left: 2,
  content: 3,
  buttons-start: 4,
  buttons-end: 5,
  buttons-right: 6,
  menu-toggle-end: 7,

I needed the iOS default since it works as expected on iOS, so copied the value of $toolbar-order-ios and put it on $toolbar-order-md and it now works!

The issue of non-consistent widths of the bar buttons I found that menuToggle and back-buttons has CSS properties for that, for which there isn’t any variables as far as I researched so I am now {
	    margin: 0 6px;
	    min-width: 44px;
	    box-shadow: none;
	} {
		margin: 0 6px;

(of course added the add-button class to the button on the left)

This works very well, I just needed to use a custom button on this specific page so I think using a specific style for just one button is fine.

Thank you for your help! Appreciate it :smiley:

1 Like