Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 756
Barry McDaid1982 Avatar asked Jan 28 '26 22:01

Barry McDaid1982


2 Answers

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>
like image 97
Dan Mironis Avatar answered Jan 31 '26 23:01

Dan Mironis


Add the class pull-right to your a element :

 <a href="logout.php" class="navbar-brand pull-right"><strong>Logout</strong></a>
like image 31
Sofiene Djebali Avatar answered Jan 31 '26 21:01

Sofiene Djebali