The issue is that when the dropdown menu is clicked, no menu comes down. Before using PHP's include, the menu worked as it should.
At first, each .html page contained its own navigation bar code. However, I recently discovered PHP's "include" function. I copied the portion of code for the nav bar to navigation.php and used the PHP include statement in index.php (the original .html page). I have removed much of the unnecessary code:
<?php include("includes/navigation.php"); ?>
This is the only line of code within my index.php file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Invest for Hope - Donations</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="icon" href="/assets/favicon.ico">
<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="/assets/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/assets/apple-touch-icon-114x114.png">
<link rel="shortcut icon" href="favicon.ico">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">html,body{height:100%;}.container-full{margin:0 auto;width:100%;min-height:100%;background-color:#110022;color:#eee;overflow:hidden;}.container-full a{color:#efefef;text-decoration:none;}.v-center{margin-top:7%;}[class^="cus-"],[class*=" cus-"]{display:inline-block;width:17px;height:16px;*margin-right:.3em;line-height:14px;vertical-align:text-top;background-image:url("/assets/social-icons-nav.png");background-position:14px 14px;background-repeat:no-repeat;opacity:0.5;}[class^="cus-"]:last-child,[class*=" cus-"]:last-child{*margin-left:0;}[class^="cus-"]:hover,[class*=" cus-"]:hover{opacity:1;}.cus-social-email{background-position:0 0;width:24px;height:24px;}.cus-social-facebook{background-position:-29px 0;width:24px;height:24px;}.cus-social-twitter{background-position:-58px 0;width:24px;height:24px;}.cus-social-youtube{background-position:-87px 0;width:24px;height:24px;}.btn-xlmain{width:310px;height:18px%;position:absolute;text-align:center;left:0;right:0;margin-left:auto;margin-right:auto;z-index:51;margin-top:-50px;}</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> About<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="mission.html"> About</a>
</li>
<li>
<a href="team.html"> Team</a>
</li>
</ul>
</li>
<li>
</ul>
</div>
</nav>
This is all the code after removing most of it from the navigation.php file. Now, it only includes the dropdown menu and CSS to format the page.
If you want to view the actual issue with the dropdown menu, go to www.investforhope.org. The homepage is the display of the exact code I have shown.
