Move Angular Material drop-down menu to left

Question

I am using Angular Material. I have successfully created a navigation bar and a drop down menu.

It looks like this:

I would like to move DROPDOWN to the left. Now he appears around the center.

HTML code:

 <md-toolbar layout="row" class="md-whiteframe-z3" style="padding: 0px;margin:0px;float: left;"> <h2>Material NavBar</h2> <md-menu> <md-button md-menu-origin ng-click="$mdOpenMenu()">Dropdown</md-button> <md-menu-content width="2"> <md-menu-item> <md-button>Help</md-button> </md-menu-item> <md-menu-item> <md-button>About</md-button> </md-menu-item> </md-menu-content> </md-menu> <md-button aria-label="Go Back"> Go Back </md-button> <md-button>Item 1</md-button> <md-button>Item 2</md-button> </md-toolbar> 

How can I change the code to move DROPDOWN left next to the Material NavBar text?

Answer 1

You just need to add <span flex> </span> to your code.

 <md-toolbar layout="row" class="md-whiteframe-z3" style="padding: 0px;margin:0px"> <h2>Material NavBar</h2> <md-menu> <md-button md-menu-origin ng-click="$mdOpenMenu()">Dropdown</md-button> <md-menu-content width="2"> <md-menu-item> <md-button>Help</md-button> </md-menu-item> <md-menu-item> <md-button>About</md-button> </md-menu-item> </md-menu-content> </md-menu> <span flex></span> <md-button aria-label="Go Back"> Go Back </md-button> <md-button>Item 1</md-button> <md-button>Item 2</md-button> 

Here is a working example. http://codepen.io/next1/pen/RaYNxw