title: Angular material align menu right
body: <p>I have Angular material nav bar(shown below). I put a md-menu inside a nav bar because I want to achieve the bootstrap navigation bar that has dropdown menu on the right side. How can I move the "WELCOME! IVAN" which is a dropdown menu on the right side.</p>
  
  <p><a href="https://i.stack.imgur.com/eByjK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/eByjK.png" alt="enter image description here"></a></p>
  
  <p>below is my code:</p>
  
  <pre><code>&lt;div ng-controller="navController"&gt;
  &lt;md-content&gt;
      &lt;md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links"&gt;
  
          &lt;md-nav-item md-nav-href="#{{ link.url}}"  ng-repeat="link in navUrl" name="{{ link.url.substr(1)}}"&gt;
              &lt;i class="fa {{ link.icon}}" aria-hidden="true"&gt;&lt;/i&gt;
              &amp;nbsp;&amp;nbsp;{{ link.link}}
          &lt;/md-nav-item&gt;
  
          &lt;md-menu md-offset="0 -7" layout-align="end center"&gt;
              &lt;md-button aria-label="Open menu" class="md-button" ng-click="$mdMenu.open($event)"&gt;
                  Welcome! {{ user}}
                  &lt;!--&lt;md-icon md-menu-origin md-svg-icon="call:phone"&gt;&lt;/md-icon&gt;--&gt;
                  &lt;i class="fa fa-user" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;/md-button&gt;
              &lt;md-menu-content width="3"&gt;
                  &lt;md-menu-item&gt;
                      &lt;md-button ng-click=""&gt; &lt;span md-menu-align-target&gt;Logout&lt;/span&gt;&lt;/md-button&gt;
                  &lt;/md-menu-item&gt;
              &lt;/md-menu-content&gt;
          &lt;/md-menu&gt;
  
      &lt;/md-nav-bar&gt;
  
  &lt;/md-content&gt;
  </code></pre>
  
  <p></p>
  
  <p>thanks in advance for your help!!! :)</p>