CODEWITHSUNDEEP
twitter-bootstrapnavbar
Barry McDaid1982
Barry McDaid1982

Reputation: 157

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

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>

Upvotes: 2

Views: 22858

Answers (4)

Dan Mironis
Dan Mironis

Reputation: 721

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>

Upvotes: 7

DirtyBit
DirtyBit

Reputation: 16772

You can use the pull-right class

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

or give the anchor tag an id and style it by using float: right;

<style>
#lout
{float: right;}
</style>
<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 id = "lout" href="logout.php" class="navbar-brand"><strong>Logout</strong></a>
             <?php
             }
             ?>
            </div>
        </div>
    </nav>

Fiddle

Upvotes: 1

Keiran van Vuuren
Keiran van Vuuren

Reputation: 62

Try using the pull-right class on your anchor element:

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

Upvotes: 0

Sofiene Djebali
Sofiene Djebali

Reputation: 4508

Add the class pull-right to your a element :

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

Upvotes: 1

Related Questions