Change navbar in bootstrap if user login

html, javascript, navbar, php, twitter-bootstrap-3

Solution

This is how I usually do it: `

<?php
if($logged_id){
    include 'menu_authenticated.php';
}
else{
    include 'menu_unauthenticated.php';
}
?>

And of course, those files will have their menus respectively //menu_unauthenticated.php `

<ul class="nav navbar-nav navbar-right">
                    <li><a href="createaccount.php"><span class="glyphicon glyphicon-user"></span>Create account</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#"><span class="glyphicon glyphicon-log-in"></span>  Login</a>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <form class="form-horizontal" role="form" action="tienda.php"  method="POST">
                                    <div class="form-group">
                                        <label class="control-label col-md-4" for="nombre">User:</label>
                                        <div class="col-md-8">
                                            <input type="text" class="form-control" name="loginUser" required>
                                        </div>
                                        <label class="control-label col-md-4" for="nombre">Pass:</label>
                                        <div class="col-md-8">
                                            <input type="password" class="form-control" name="loginPass" required> <br>
                                        </div>
                                        <div class="col-md-5"></div>
                                        <button type="submit" class="btn btn-default col-md-5">Log In</button>
                                    </div>
                                </form>
                            </li>
                        </ul>
                    </li>
    </ul>

//menu_authenticated.php `

<ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#"><span class="glyphicon glyphicon-user"></span>Nombre USUARIO</a>

                    <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Mi página</a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>  Carrito</a></li>
                        </ul>
                    </li>


                    <li><a href="#"><span class="glyphicon glyphicon-log-out"></span>  Logout</a></li>

                </ul>

Problem

I have a standard menu, including an option for "logging" in and "create user". What I want is that when either you create a user or you loging the whole navbar menu to change, say, "My user's page" and "logout" instead, how can I do it? ``` <div id="menu"> <nav class="navbar"> <div class="container"> <ul class="nav navbar-nav"> <li class="active"><a href="#"><span class="glyphicon glyphicon-home"> </span> Home</a></li> <li><a href="#">Descuentos</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories<span class="caret"/></a> <ul class="dropdown-menu"> <li><a href="#">Cat A</a></li> <li><a href="#" >Cat B</a></li> <li><a href="#">Cat C</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="createaccount.php"><span class="glyphicon glyphicon-user"></span>Create account</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a> <ul class="dropdown-menu" role="menu"> <li> <form class="form-horizontal" role="form" action="tienda.php" method="POST"> <div class="form-group"> <label class="control-label col-md-4" for="nombre">User:</label> <div class="col-md-8"> <input type="text" class="form-control" name="loginUser" required> </div> <label class="control-label col-md-4" for="nombre">Pass:</label> <div class="col-md-8"> <input type="password" class="form-control" name="loginPass" required> <br> </div> <div class="col-md-5"></div> <button type="submit" class="btn btn-default col-md-5">Log In</button> </div> </form> </li> </ul> </li> </ul> </div> </nav> </div> ``` Basically, change ``` <ul class="nav navbar-nav navbar-right"> <li><a href="createaccount.php"><span class="glyphicon glyphicon-user"></span>Create account</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a> <ul class="dropdown-menu" role="menu"> <li> <form class="form-horizontal" role="form" action="tienda.php" method="POST"> <div class="form-group"> <label class="control-label col-md-4" for="nombre">User:</label> <div class="col-md-8"> <input type="text" class="form-control" name="loginUser" required> </div> <label class="control-label col-md-4" for="nombre">Pass:</label> <div class="col-md-8"> <input type="password" class="form-control" name="loginPass" required> <br> </div> <div class="col-md-5"></div> <button type="submit" class="btn btn-default col-md-5">Log In</button> </div> </form> </li> </ul> </li> </ul> ``` to this: ``` <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#"><span class="glyphicon glyphicon-user"></span>Nombre USUARIO</a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Mi página</a></li> <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> Carrito</a></li> </ul> </li> <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li> </ul> ``` What's the best way to do this?

Original source