Sorry if this has been answered before, please link me if so, I couldn't find anything..
Basically, my jQuery worked fine on Bootstrap, up to the point I made a favicon. Now I think either my script / head tag alignment is off, so I tried to fix that for the past hour, but nothing is working.
Also putting the script at the end of the body, like normal, doesn't work. Not sure what I've done wrong here.
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- jQuery -->
<script src="js/jquery-1.12.4.min.js"></script>
<!-- CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=PT+Serif:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Exo+2:400,300,700,900,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- snip html -->
<!-- jQuery Version -->
<script src="js/jquery-1.12.4.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body></html>
I know it's in there twice now, but neither works. What's wrong? :(
Edit: Dropdown doesn't work, this is the HTML for the dropdown:
<!-- Navigation -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#"><img src="img/logo/logo.png" class="img-responsive img-icon" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-default">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I changed some CSS for buttons, is that the problem?
/* Navbar Colours - Fixing Dropdown */
.nav > li a {
color: #e97117;
}
.nav > li a:hover, a:focus {
color: #e97117;
}
/* Navbar link Colours */
.navbar-default a:hover, a:focus {
color: #e97117 !important;
}
/* Button Colour */
.btn {
color: #fff;
font-family: 'Exo 2', sans-serif;
}
.btn-default:hover,
.btn-default:focus {
color: #e97117;
background-color: transparent;
border-color: #e97117;
}
.btn-secondary {
color: #fff;
background-color: transparent;
border-color: #fff;
}
.btn-secondary:hover,
.btn-secondary:focus {
color: #fff;
background-color: #e97117;
border-color: #fff;
}
