CODEWITHSUNDEEP
twitter-bootstrapnavbar
harryHops
harryHops

Reputation: 23

Navbar logout button

I have created a nav bar, but I can't move the logout button, I want to move it to the right of the screen. I am using bootstrap to build the navbar.

Here is the code I have used so far. How could I move it to the right?

<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
       <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)//$_SESSION
            {        ?> <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: 15378

Answers (1)

KmeCnin
KmeCnin

Reputation: 527

You have to pull it to the right and remove navbar-brand: class="pull-right". Because navbar-brand is float-left styled.

Bootstrap style is as it:

.navbar-brand {
  float: left;
  height: 50px;
  padding: 15px 15px;
  font-size: 18px;
  line-height: 20px;
}

Your code should be:

<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
   <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)//$_SESSION
        {        ?> <a href="logout.php" class="pull-right">    <strong>Logout</strong></a>
<a class="pull-left">Welcome <?php echo $_SESSION["staffname"];  ?></a>

         <?php
         }
         ?>
        </div>
    </div>
</nav>

Upvotes: 3

Related Questions