My nav dropdown button for smaller screens (phones and tablets) is not working. I have included the JS files but its still not working. Can anyone help determine why this is not wanting to connect with my js files.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.mini.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Header -->
<header>
<nav class="navbar navbar-default navbar-fixed">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">AffAttraction</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Advertisers</li>
<li>Publishers</li>
<li>Blog</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<form class="navbar-form navbar-right">
<input type="email" name="email" class="form-control" placeholder="Email" required="">
<input type="password" name="password" class="form-control" placeholder="Password" required="">
<button type="submit" class="btn btn-green">Login <span class="glyphicon glyphicon-log-in"></span></button>
</form>
</div>
</div>
</nav>
</header>
<!-- Header -- >
<!-- Showcase -->
<div id="showcase">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1><span class="highlight">Performance</span> Based Marketing</h1>
<p>Do you have traffic? Let us help you monetize and profit from your websites, apps, games, blogs, and more!</p>
</div>
</div>
</div>
</div>
<!-- Showcase -->
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.mini.js"></script>
</body>
</html>
I have included it at the top under my CSS links if you think that could be a problem. I also tried putting it under the body tag and the html tag. I am lost on what to do. Those files do exist!
I tried to run your code, replacing your local bootstrap stylesheets with the CDN version. When I loaded it, I crashed because jQuery was missing. After adding jQuery inside the head, it worked:
<script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
If you want to connect the Bootstrap CSS and JS files on your HTML, you can easily do that with Bootstrap CDN.
Add this this to your <head> as Bootstrap Stylesheet
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
And this to your <body> as Bootstrap JavaScript link
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
Also add JQuery for Bootstrap to work properly
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
Related
For most of today I can't get my bootstrap v4 collapsable hamburger menu to work on my local xampp server. Strangely, it works just fine on my public website! The hamburger appears at 768 px wide display. This is problem is present in Chrome and Firefox.
I'm at a loss. I've combed through similar stackoverflow threads but haven't found anything that addresses my problem. My navbar code block is also identical to the navbar example in the Bootstrap class on lynda.com.
I know this much:
I am using the latest minified version of jquery, and the order of the javascript script files in the "head" section of my xampp/local "index.html" doc is identical to the one in my hosted/public server index.html file. Here's a difference that may or may not matter: I use CDN links to access all bootstrap files for my public/hosted page, and use relative link paths to access the JS/CSS files on my computer for my XAMPP/local website ("htdocs" is the root folder for my xampp setup).
To rule out some things, I copy/pasted the nav bar code block from my public page (the code that makes the hamburger icon expand upon click) into my local index.html file which is hosted on xampp. No joy. I know the relative folder paths are correct for the javascript files in my local xampp server (htdocs is the root folder, and the JS files are in the "js" folder).
I also tried re-downloading the newest version of jQuery (3.2.1) into my local folder thinking maybe the file I was using was corrupted, but still nothing. I'm assuming the hamburger menu functionality is a jQuery thing, but perhaps it's javascript.
Finally: I checked the console for my local "index.html" page and there were no errors.
So what gives? Why isn't my hamburger menu working on my local production server but works fine on my public page? Does it have to do with the javascript files being loaded via CDN vs locally on my hard drive?
Please see below my head and nav bar code block for my local production/xampp server (this is the code that doesn't work) and then the code block for my head and nav bar (this is the code that does work). I think the problem lies in the "head" section and how js is linked/accessed.
Thanks for any help!
<head>
<meta charset="utf-8">
<meta http-equiv="X-US-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html" http-equiv="Content-Type"/>
<meta content="Steve Gladwin" name="description"/>
<meta content="portfolio, design, steve, steven, stephen, systems, librarian, social media, library," name="keywords"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<!-- Local CSS File -->
<link rel="stylesheet" type="text/css" href="/css/main.css" media="screen">
<title>Steve Gladwin</title>
<!-- Bootstrap Javascript/jQuery -->
<script src="/js/jquery-3.2.1.min.js"></script>
<!-- Bootstrap JS Tether -->
<script src="/js/tether.min.js"</script>
<!-- Bootstrap JS -->
<script src="/js/bootstrap.min.js"></script>
</head>
<body>
<!-- <div class="container">
<div class="row">
<div class="col-md-12"> -->
<nav class="navbar navbar-inverse navbar-toggleable-sm" style="background-color: red;">
<!-- <div class="container"> -->
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#burgercollapse" aria-controls="burgercollapse" aria-expanded="false" aria-label="toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="navbar-brand mr-auto">Steve Gladwin</h1>
<!-- </div> -->
<div class="collapse navbar-collapse" id="burgercollapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="index.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Resume</a></li>
<li class="nav-item"><a class="nav-link" href="#">For Fun</a></li>
<li class="nav-item"><a class="nav-link" href="#">Social</a></li>
</ul>
</div> <!--collpase-->
</nav>
<head>
<meta charset="utf-8">
<meta http-equiv="X-US-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html" http-equiv="Content-Type"/>
<meta content="Steve Gladwin" name="description"/>
<meta content="portfolio, design, steve, steven, stephen, systems, librarian, social media, library," name="keywords"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- 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">
<!-- Bootstrap Javascript/jQuery -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
<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>
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" 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="css/bootstrap-4.0.0-alpha.6-dist/tether-1.3.3/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous">
</script> -->
<!-- <script src="css/bootstrap-4.0.0-alpha.6-dist/js/jquery-3.2.1.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous">
</script> -->
<!--<script src="css/bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous">
</script>-->
<!-- <link href="css/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> -->
<!-- <link href="css/bootstrap-4.0.0-alpha.6-dist/css/bootstrap-grid.min.css" rel="stylesheet">
<link href="css/bootstrap-4.0.0-alpha.6-dist/css/bootstrap-reboot.min.css" rel="stylesheet"> -->
<link rel="stylesheet" type="text/css" href="CSS/main.css" media="screen">
<title>Steve Gladwin</title>
</head>
<body>
<!-- <div class="container">
<div class="row">
<div class="col-md-4">
<h2>Steve Gladwin</h2>
</div> -->
<!-- <div class="container">
<div class="row">
<div class="col-md-12"> -->
<nav class="navbar navbar-inverse navbar-toggleable-sm" style="background-color: red;">
<!-- <div class="container"> -->
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#burgercollapse" aria-controls="burgercollapse" aria-expanded="false" aria-label="toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="navbar-brand mr-auto">Steve Gladwin</h1>
<!-- </div> -->
<div class="collapse navbar-collapse" id="burgercollapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="index.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Resume</a></li>
<li class="nav-item"><a class="nav-link" href="#">For Fun</a></li>
<li class="nav-item"><a class="nav-link" href="#">Social</a></li>
</ul>
</div> <!--collpase-->
</nav>
your markup on the 1st code block is malformed
<script src="/js/tether.min.js"</script>
you're missing the closing >
You reference CDNs in your other code block also and relative files on your local version. Be sure that they are referenced correctly.
I'm wondering whats the right way to include js plugins into laravel to use them in every file in project....
I first included them in the file /public/index.php, worked in general but caused some issues that are not acceptable.. So I'm looking for a better way to do it.
I now tried it in my master template master.blade.php that's included in every view.. There I used:
<script src="/js/jquery-3.1.1.min.js"></script>
<script src="/js/sweetalert.min.js"></script>
But it's not working, getting $ is not defined... Using the CDN doesn't change anything as well, so it doesn't seem to be about the path...
Can anybody help me? Been struggling around for days with this now, testing around different ways, but nothing works....
Edit: That's the complete file master.blade.php
<!DOCTYPE html>
<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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Shopping Portal') }}#yield('page')</title>
<!-- Styles -->
<link href="/css/app.css" rel="stylesheet"/>
<link href="/css/styles.css" rel="stylesheet"/>
<link href="/css/sweetalert.css" rel="stylesheet"/>
<!-- Scripts -->
<script src="/js/jquery-3.1.1.min.js"></script>
<script src="/js/sweetalert.min.js"></script>
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Shopping Portal') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<!-- some nav items -->
</div>
</div>
</nav>
#yield('content')
<div class="container">
<div class="row">
<footer class="text-center">
© 2016
<ul>
<li class="btn btn-default">Impressum</li>
<li class="btn btn-default">Kontakt</li>
</ul>
#yield('footer')
</footer>
</div>
</div>
</div>
<!-- Scripts -->
<script src="/js/app.js"></script>
</body>
</html>
Edit2: I noticed one thing now: When I'm loading jquery again out of a view (so the view starts with that:
#extends('master')
<script src="/js/jquery-3.1.1.min.js"></script>
#section('content')
), then it works (at least in that specific view), but I'm wondering why... Am I wrong that if I load jQuery in the master template its included to every tempalte using the master template as well?
on layout you can add this
#yield('scripts')
and on page.blade.php
#section('scripts')
<script type="text/javascript" src="{{ URL::asset('js/main.js') }}"></script>
#endsection
if you want script to be on all pages add it to layout
directly like this
<script type="text/javascript" src="{{ URL::asset('js/main.js') }}"></script>
I know this has been asked thousands of time and I've been looking at some of the similar questions for about and an hour now.
I can't figure out whats the problem in my code and no matter what solution I try it doesn't works.
Here is the navbar snippet in my project (derived from the bootstrap docs):
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale = 1">
<title>{{ title }}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target"#rtNavbar" 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="#">TestApp01</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-collapse" id="rtNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true" /></button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Some more stuff here -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I'm using bootstrap 3 for a express node.js app. And I'm using hogan templating if that matters.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale = 1">
<title>{{ title }}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" 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="#">TestApp01</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-collapse" id="rtNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true" /></button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Some more stuff here -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
Just Make This Change In The data-target.
https://gist.github.com/anonymous/916bb0286c966660121fecbafdd9140a
Its because Bootstrap is not compatible with jQuery 3. Use jQuery 2, or embed jQuery Migrate after jQuery.
change your data target its wrong try like this
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#rtNavbar" aria-expanded="false">
If doesn't thats because of Bootstrap 3 is not compatible with jQuery 3.0 and above at the moment. So latest version of jQuery that can be used with Bootstrap 3 is 2.2.4.
Part of the problem might be the way (and where) the JS and jQuery is embedded in your code. I noticed - at least for the JS - that there isn't a closing </script> tag. I think your problem may be as simple as not having these tags in the right place and not being closed properly.
I've used the following <script> additions in the <head> and had the collapse button work, so you may want to try these within the <head>. It may even be as simple as not including these two scripts right below the Bootstrap CSS link. It should look something like this (for Bootstrap 3):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
You've also got a problem with the data-target in your <button> tag. Try using something like data-target""#myNavbar" instead.
The other thing is that you have a redundant navbar-collapse for the second <div> pertaining to the right-aligned elements in your bar. This could muddy the waters and cause problems. Otherwise, the rest of the code materials look good. Just try declaring the above code in the <head>. Good luck!
I've just started using Twitter Bootstrap 3.0, I've been reading the documentation and I'm trying to create a responsive navigation bar, my code is the same structure as the example in the documentation but it doesn't seem to be working for some reason.
Below is the HTML code I'm using, I'm just using the default CSS and Javascript files.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Efar Communication Services</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- For screen readers and mobiles -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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">Efar</a>
<p class="navbar-text">Business Infrastructure Solutions</p>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Products</li>
<li>Client Area</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div> <!-- End of container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The problem was that where I had <script src="//code.jquery.com/jquery.js"></script>, it turns out that the site wasn't responding and so the page couldn't use jquery, which it needs to work. So I downloaded a local copy of jquery and changed it to <script src="js/jquery.js"></script>. Now it's working fine
I've been pulling my hair out over this. The doc makes it seem so simple but I cannot for the life of me get the collapsed navigation bar to expand properly/consistently. I have to click 2-3 times for it to expand, and it only does so after playing the "collapse" animation.
In an attempt to isolate the issue, I created this page that has the stock bootstrap nav HTML and the bare minimum .js I think it required to get it to work.
http://stats.thephish.fm/test.html
(same nav is on the root index for that site).
Help is appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/>
<link href="css/my.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-collapse.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="">
Overview
</li>
<li class="">
Scaffolding
</li>
<li class="">
Base CSS
</li>
<li class="active">
Components
</li>
<li class="">
Javascript plugins
</li>
<li class="">
Using LESS
</li>
<li class="divider-vertical"></li>
<li class="">
Customize
</li>
<li class="">
Examples
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I have also tried adding this script in the head tag:
<script type="text/javascript">
$(document).ready(function() {
$('.collapse').collapse();
});
</script>
but the collapse does not work at all when I do this.
Was including both bootstrap.js and bootstrap-collapse.js. oops. I have to say this is kind of confusing, because every plugin says "Download file" next to it, which seems to indicate it's an add-on that enhances the default javascript library.