Angular material align menu right

Question

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.

below is my code:

<div ng-controller="navController">
<md-content>
    <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">

        <md-nav-item md-nav-href="#{{ link.url}}"  ng-repeat="link in navUrl" name="{{ link.url.substr(1)}}">
            <i class="fa {{ link.icon}}" aria-hidden="true"></i>
            &nbsp;&nbsp;{{ link.link}}
        </md-nav-item>

        <md-menu md-offset="0 -7" layout-align="end center">
            <md-button aria-label="Open menu" class="md-button" ng-click="$mdMenu.open($event)">
                Welcome! {{ user}}
                <!--<md-icon md-menu-origin md-svg-icon="call:phone"></md-icon>-->
                <i class="fa fa-user" aria-hidden="true"></i>
            </md-button>
            <md-menu-content width="3">
                <md-menu-item>
                    <md-button ng-click=""> <span md-menu-align-target>Logout</span></md-button>
                </md-menu-item>
            </md-menu-content>
        </md-menu>

    </md-nav-bar>

</md-content>

thanks in advance for your help!!! :)

Answer 1

Try to use a flex span like in this codepen example demo. <span flex></span> fills the space between elements.

<div ng-controller="navController">
    <md-content>
        <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
            <md-nav-item md-nav-href="#{{ link.url}}"  ng-repeat="link in navUrl" name="{{ link.url.substr(1)}}">
                <i class="fa {{ link.icon}}" aria-hidden="true"></i>
                &nbsp;&nbsp;{{ link.link}}
            </md-nav-item>
            <span flex></span>
            <md-menu md-offset="0 -7" layout-align="end center">
                <md-button aria-label="Open menu" class="md-button" ng-click="$mdMenu.open($event)">
                    Welcome! {{ user}}
                    <!--<md-icon md-menu-origin md-svg-icon="call:phone"></md-icon>-->
                    <i class="fa fa-user" aria-hidden="true"></i>
                </md-button>
                <md-menu-content width="3">
                    <md-menu-item>
                        <md-button ng-click=""> <span md-menu-align-target>Logout</span></md-button>
                    </md-menu-item>
                </md-menu-content>
            </md-menu>
        </md-nav-bar>
    </md-content>
</div>