PHP Include not working with bootstrap dropdown's

Question

(Bootstrap 3) If I did

http://dev.artsicleprojects.com/navbar.php

the dropdowns function, however if I do

http://dev.artsicleprojects.com/index.php

The dropdowns do nothing. My index.php code is right here

<html>
<head>
    <title>Artsicle Projects Dev</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="bootstrap/bootstrap.min.js"></script>
    <script src="script.js"></script>
    <?php include 'navbar.php'?>
</body>
</html>

Edit

Code for navbar.php:

    <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="script.js"></script>
<div class="jumbotron text-center">
    <h1>Artsicle Projects</h1>
</div>
<div class="dropdown" style="position: absolute; left: 30%">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Games

        <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="catclicker/index.php">Cat Clicker</a></li>
        <li><a href="#">Exit The Room</a></li>
        <li><a href="comingsoon/index.html">Coming Soon!</h5></a></li>
    </ul>
</div>
<div class="dropdown" style="position: absolute; left: 60%">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Extra

        <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="#">Nothing</a></li>
        <li><a href="comingsoon/index.html">Coming Soon!</h5></a></li>
    </ul>
</div>

Thanks in advance!

hungerstar · Accepted Answer · 2017-01-09 22:42:40Z

4

You have invalid markup in your index.php by having multiple <head>, <body>, <script> etc. This is because navbar.php is a complete (standalone) HTML page and you're include that complete page into another page. View the source of each page and you'll see what's happening.

Remove everything from navbar.php that isn't inside <body>. That is, only include the markup for the navbar, not <head>, <body>, <script> etc. that's in navbar.php.

answered Jan 9, 2017 at 22:42

hungerstar

21.8k6 gold badges52 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Artsicle Over a year ago

Oh, fixed it. Didn't read the <script> part. Upvoted and answer!

Mason.Chase · Accepted Answer · 2017-01-09 22:53:08Z

This is the correct order. Move header section from navbar.php to header:

<html>
<head>
    <title>Artsicle Projects Dev</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="http://dev.artsicleprojects.com/bootstrap/bootstrap.css"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="http://dev.artsicleprojects.com/bootstrap/bootstrap.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="http://dev.artsicleprojects.com/bootstrap/bootstrap.min.js"></script>
</head>

<body>
    <div class="jumbotron text-center">
        <h1>Artsicle Projects</h1>
    </div>
    <div class="dropdown" style="position: absolute; left: 30%">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Games

            <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="catclicker/index.php">Cat Clicker</a></li>
            <li><a href="#">Exit The Room</a></li>
            <li><a href="comingsoon/index.html">Coming Soon!</h5></a></li>
        </ul>
    </div>
    <div class="dropdown" style="position: absolute; left: 60%">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Extra

            <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">Nothing</a></li>
            <li><a href="comingsoon/index.html">Coming Soon!</h5></a></li>
        </ul>
    </div></body>
</html>

Collectives™ on Stack Overflow

PHP Include not working with bootstrap dropdown's

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related