How can I change the login <li> with another css design, when the user log in in the same page

Question

I made a Navigation Bar which contain a Login , so I want to change it with a div (contain image and user's name), when the user log in !

NavBar :

 <div class="collapse navbar-collapse" id="axit-nav">
            <ul class="nav navbar-nav navbar-right">
                <li><a> <button id="myButton">Create event</button></a></li>
            </ul>
            <ul class="nav navbar-nav navbar-left">
                <li><a class="dsctv hidden-xs hidden-sm">events</a></li>
                <li><a class="dsctv hidden-xs hidden-sm">Login</a></li>
                <li><img alt="Logo brand Wevento" class="navbar-brand hidden-xs hidden-sm" src="theme/img/logos/Logo%20White%20Blue.png" </li>
            </ul>
        </div>

PHPcode :

<?php 
session_start();
if (isset($_SESSION['Mail'])) {
     header('Location: admin/index.php');
}
include 'admin/init.php';    
// Check for ADMINS
if($_SERVER['REQUEST_METHOD'] == 'POST'){

    $mail= $_POST['mail'];
    $password= $_POST['password'];
    $hashedPass= sha1($password);

    // check if the user exist in DB

    $stmt = $conn->prepare("SELECT Mail, Password FROM admin WHERE Mail= ?  AND Password = ? ");
    $stmt->execute(array($mail, $hashedPass));
    $count = $stmt->rowCount();

    if($count > 0) {
        $_SESSION['Mail'] = $mail;

    } 
}
 ?>

Answer 1

You need to write a check to confirm if the session exists. If yes, show the user name, if not, show the login link. Something like this:

<div class="collapse navbar-collapse" id="axit-nav">
    <ul class="nav navbar-nav navbar-right">
        <li><a> <button id="myButton">Create event</button></a></li>
    </ul>
    <ul class="nav navbar-nav navbar-left">
        <li><a class="dsctv hidden-xs hidden-sm">events</a></li>
        <?php if (!isset($_SESSION)) { ?>
        <li><a class="dsctv hidden-xs hidden-sm">Login</a></li>
        <?php } else { ?>
        <li><a class="dsctv hidden-xs hidden-sm"><?php echo $_SESSION['user_name'];?></a></li>
        <?php } ?>
        <li><img alt="Logo brand Wevento" class="navbar-brand hidden-xs hidden-sm" src="theme/img/logos/Logo%20White%20Blue.png" </li>
    </ul>
</div>

Of course echo out the user name based on how you stored it in the session.

Answer 2

If you are using jQuery, I think you can edit with .css() method.

Something like

$('your-element').click(function () {
 $(this).css('background', '#000');
};

jQuery .css() method documentation : http://api.jquery.com/css/