How can I move the position of a navbar logout button?

Question

I have a navbar with a welcome greeting for the user on the left, but I want to move my logout feature to the opposite side on the right. At the moment it sits beside the welcome. Any ideas on how to move it? Here is my code that I have been using.

<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<!--navbar settings-->
           <div class="container-fluid">
            <div class="navbar-header">


<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!--<a class="navbar-brand" href="index.html">Logout</a>-->

                <?php    //echo $_SESSION["staffname"];
            if(isset($_SESSION["staffId"]) && $_SESSION["staffId"] != NULL)
            {        ?> <a class="navbar-brand">
                     Welcome   <?php echo $_SESSION["staffname"];  ?></a>
               <a href="logout.php" class="navbar-brand"><strong>Logout</strong></a>
             <?php
             }
             ?>
            </div>
        </div>
    </nav>

Answer 1

Best way I would think of would be using div with class .navbar-right for logout link container:

<?php $isLoggedIn = (isset($_SESSION["staffId"]) && $_SESSION["staffId"] != NULL) ? true : false; ?>
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <!--navbar settings-->
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!--<a class="navbar-brand" href="index.html">Logout</a>-->

            <?php if($isLoggedIn): ?>
                <a class="navbar-brand">
                    Welcome <?php echo $_SESSION["staffname"];  ?>
                </a>
            <?php endif; ?>
        </div>
        <?php if($isLoggedIn): ?>
            <div class="nav navbar-nav navbar-right">
               <a href="logout.php" class="navbar-brand"><strong>Logout</strong></a>
            </div>
        <?php endif; ?>
    </div>
</nav>

Answer 2

Add the class pull-right to your a element :

 <a href="logout.php" class="navbar-brand pull-right"><strong>Logout</strong></a>