$('#logOut').click(function()
    {
        <?php
            //session_start(); comment this because this is called top of the page.
            unset($_SESSION['email']);
            unset($_SESSION['password']);
            header('Location: test.php');
        ?>
    });
This is inside the newnavbar.php. And test.php pages load this page.
$(function(){
  $("#nav-placeholder").load("newnavbar.php");
});
I also use header('Refresh:0, url= test.php'); but in both cases I have to reload the pages manualyl.  
Edit 1
Same case occurs for sign in. After sign in I have to reload the page then the user avatar shown in place of sign in button. And If I reload twice then user gone to log out.
I also use
$('#signInSubmit').click(function() 
    {
        $('#signIn').modal('toggle');
        //alert("signup completed");
        var email=document.getElementById('signInEmail').value;
        var password = document.getElementById('signInPassword').value;
        $.ajax({
            url: 'signIn.php',
            type: 'POST',
            data: {
                email: email,
                password: password
            },
            success: function(data)
            {
                alert(data);
                <?php header('Location: test.php'); ?>
            },
            error: function(data)
            {
                console.log(data);
            }            
        });
    });
But, test.php page not shown on success.
