I recently started working with the vanilla version of Bootstrap to create a universal template for a friend's websites. Although I have previous experience with Bootstrap and have never encountered any issues, I am now facing a problem. I want to clarify that I have not made any changes to the Bootstrap js or css code.
The main issue I am currently dealing with is that the links in the navbar are unclickable.
HTML Beginning
<head>
<title>Comic Title - Update Schedule</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<? require "walrus.php"; ?>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.navbar-nav a[href]').click(function (e) { e.preventDefault(); });
});
</script>
<style>
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#00FF00;color:#fff;height:150px;">
<h1>Example Header</h1>
<h3>You'll probably want a cool image here.</h3>
</div>
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="150" style="z-index: 1001;">
<ul class="nav navbar-nav">
<li><a class="link" href="#">Home</a></li>
<li><a class="link" href="http://www.google.com">About</a></li>
<li><a class="link" href="http://www.google.com">Characters</a></li>
<li><a class="link" href="page.php?p=archive">Archive</a></li>
</ul>
</nav>
I have explored multiple solutions on Stack Overflow, such as this and this, but none of them have provided a permanent fix.