user5947524 user5947524 - 1 month ago 14
PHP Question

Bootstrap Dropdown Menu Not Working?

Hello I am created a new bootstrap website and for some reason the dropdown menu will not work correctly. When I click it, it does nothing.

Below is the code I have in my index.php file body:



<div class="container-fluid">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">

<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.php">CookieCodec</a>

</div>

<div class="collapse navbar-collapse" id="navbar1">

<ul class="nav navbar-nav navbar-right">

<?php if (isset($_SESSION['usr_id'])) { ?>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#"><span class="glyphicon glyphicon-user"></span> Signed in as <?php echo $_SESSION['usr_name']; ?></a>

<ul class="dropdown-menu" role="menu">
<li><a href="#">My Profile</a></li>
<li><a href="#">Upload</a></li>
<li><a href="#">Account</a></li>
</ul>
</li>


<li><a href="logout.php"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>

<?php } else { ?>

<li><a href="login.php">Login</a></li>

<li><a href="register.php">Sign Up</a></li>

<?php } ?>

</ul>

</div>

</div>




Does anyone know why it will not work? Am I missing something?

Answer

Her is a demo set up you. For better understanding you can read this http://getbootstrap.com/getting-started/ & you can read this also for a quick setup environment. https://www.tutorialspoint.com/bootstrap/bootstrap_environment_setup.htm

<!DOCTYPE html>
<html>
<head>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">

    <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">

            <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.php">CookieCodec</a>

    </div>

    <div class="collapse navbar-collapse" id="navbar1">

        <ul class="nav navbar-nav navbar-right">

            <?php if (isset($_SESSION['usr_id'])) { ?>
    <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#"><span class="glyphicon glyphicon-user"></span> Signed in as <?php echo $_SESSION['usr_name']; ?></a>

                <ul class="dropdown-menu" role="menu">
            <li><a href="#">My Profile</a></li>
    <li><a href="#">Upload</a></li>
    <li><a href="#">Account</a></li>
                    </ul>
                </li>


                <li><a href="logout.php"><span class="glyphicon glyphicon-log-out"></span>  Logout</a></li>

            <?php } else { ?>

            <li><a href="login.php">Login</a></li>

            <li><a href="register.php">Sign Up</a></li>

            <?php } ?>

        </ul>

    </div>

</div>
</nav>

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>