-1

I am trying to create a standard menu-bar to use on all my site's pages.

I tried using the Create PHP header/footer but when I put my Bootstrap 4 navbar in, the drop-downs stopped working

Can anyone help?

The code to include the header is

<body>
    <?php include("navbar.php"); ?>
    <div class="container">
        <h1>Home</h1>
    </div>

with the Bootstrap head and scripts

navbar.php is

<?php

    session_start();

    // connect to database
    include("connection.php");

?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>MWfD Job Control</title>

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

        <!-- MWfD CSS -->
        <link rel="stylesheet" type="text/css" href="mwfd.css">

    </head>


    <body>
        <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">MWfD v2</a>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="index.php">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="customerentry.php?customerid=0"><span class="red">Job/Quote Entry</span></a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Quotes</a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="reportquotes.php?select=pending">Pending quotes</a>
                            <a class="dropdown-item" href="reportquotes.php?select=all">All quotes</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Job Progress</a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item disabled" href="#">Unpriced jobs</a>
                            <a class="dropdown-item" href="reportengraving.php">Engraving jobs</a>
                            <a class="dropdown-item" href="reportlaser.php">Laser jobs</a>
                            <a class="dropdown-item" href="reportwoodwork.php">Woodwork jobs</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Reports</a>
                    </li>
                </ul>
                <form method="post" class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="number" id="jobField" name="jobField" placeholder="Job number">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="jobNoSearchBtn" name="searchBtn">Search</button>
                </form>
            </div>
        </nav>

        <!-- jQuery first, then Tether, then Bootstrap JS. -->
        <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

    </body>
</html>

The navbar is copied from the Bootstrap 4 navbar page, and works if it is left in the page.

Nik
  • 5
  • 3
  • It would most probably help if you could provide some code that works/doesn't work for you. – t1gor Jun 27 '17 at 14:04
  • Make sure you're using the latest bootstrap 4 release (alpha.6) as there have been significant changes to the navbar across the various alpha releases. – Patrick Jun 27 '17 at 23:33

1 Answers1

0

When you say that the drop-downs stoppped working I'm assuming that you had them working before. Check that your links to the .js (and .css) files are still valid. Maybe open up the console and check the network.

jpradcliffe
  • 57
  • 7