I am creating a web, which will have many sub pages and I want to include a NavBar in all of them, I am working with bootstrap 5 and I want to know if there is any way to create a single NavBar and insert it in all the pages so I don't have to update them 1 by one every time I make a change.
I leave here the code of my NavBar:
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ALCOHOLIMPIADAS</title>
<link rel="shortcut icon" href="../img/icono.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
</head>
<body>
<!--MENU-->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="../index.html">
<img src="../img/logo.png" alt="Logo" width="70" height="70" class="d-inline-block"> ALCOHOLIMPIADAS </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="../index.html">INICIO</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="../#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> JUEGOS </a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="../juegos_cartas.html">JUEGOS CON CARTAS</a>
</li>
<li>
<a class="dropdown-item" href="../juegos_nada.html">JUEGOS SIN NADA</a>
</li>
<li>
<a class="dropdown-item" href="../#">JUEGOS DE DADOS</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="../#">CONTACTO</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
I have tried to import the code from another file with JavaScript but the format is not correct.
I have already checked these links but I have not been able to make it work:
SO (in spanish)
Lost question
Yes, you can create a separate HTML file for your Navbar and then include it in all the pages where you want to use it. This way, any changes you make to the Navbar will automatically reflect on all the pages where it's included.
To include the Navbar in other pages, you can use JavaScript to load the HTML content of the Navbar file and then insert it into the page. Here's an example:
1. Create a separate file for the Navbar, let's call it navbar.html,
and place your Navbar code in it.
2. On your other pages, add an empty div element where you want to
include the Navbar. For example:
<body>
<div id="navbar"></div>
<!-- rest of your page content -->
</body>
3. Add the following JavaScript code to the bottom of your page, just
before the closing tag:
<script>
// Load the Navbar content
fetch('navbar.html')
.then(response => response.text())
.then(data => {
// Insert the Navbar content into the navbar div
const navbar = document.getElementById('navbar');
navbar.innerHTML = data;
});
</script>
This code uses the Fetch API to load the content of the navbar.html file and then inserts it into the navbar div.
Make sure to replace navbar.html with the correct path to your Navbar file.
With this setup, any changes you make to the Navbar code in the navbar.html file will automatically reflect on all the pages where the Navbar is included.
Related
I have a dropdown menu made in Bootstrap. I implemented a jQuery toggleClass on the dropdown menu icon that changes the icon on click. Normally, it is supposed to show the hamburger icon when the menu is closed, then change to an X icon when the menu is open. But the problem here is that, if the menu is clicked too fast(a double click), the reverse would then be the case(i.e The menu then shows an X icon when closed and a hamburger icon when open). And I dont want that. Here is the code snippet.
$("span.toggler").click(function() {
$("#toggler-icon").toggleClass("fa-bars fa-times");
})
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Hi</a>
<span class="toggler">
<span id="toggler-icon" class="fa-solid navbar-toggler fa-bars fa-2x text-white" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"></span>
</span>
<div class="collapse text-white navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<span class="fa-solid fa-home"></span> Dashboard </a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
Is there a way I can prevent this?
If you use the right selectors, you can style the toggler icon based on the navbar's state (collapsed or not).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
button.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
background-image: none;
}
button.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
content: "\58";
line-height: 2rem;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled">Disabled</a>
</div>
</div>
</div>
</nav>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
NOTE: My Answer is more about giving you intuition on WHAT the problem is and WHY it's happening. I think #kmoser's suggestion is the best suggestion.
The issue is JavaScript Call Stack is competing with the Render Event Loop creating a race condition which the render events will always loose. But Why?
Render event's travel thru the browsers Event-Loop onto JavaScript's Call Stack. BUT, button clicks travel directly to the Call Stack, skipping the event loop. Which means, button clicks are executed immediately (in most cases: synchronously) while render events are executed asynchronously (most of the time) and thus the render events don't have a chance to be appended to the Call Stack in the order you intended.
Why? Because they typically carryout animations! and animations are always syntactically described with some millisecond delay runtime.
CSS Stylesheet Syntax Example:
animation: .5s linear 1s infinite alternate slidein;
The .5s is an asynchronous side-effect. Therefore it will automatically be put onto the Browsers Event-Loop, and whenever JavaScript's Call-Stack says
Hey event loop, i'm finished with all these button clicks, I'm ready for that animation you're holding!
then it executes the animation by pushing it onto the Call Stack.
In your case, if you looked under-the-hood into Bootstraps CSS files you'd find some animating syntax per my example for the dropdown with the millisecond runtime defined.
The solution?
As #kmoser pointed out, the intended way to accomplish your desired task is to trigger css icon changes (Hamburger to X) based on css actions (animations: dropdown open, dropdown closed), rather than user actions.
Hope that helps.
This question already has answers here:
Why isn't collapse in Bootstrap 5 working from the example?
(2 answers)
Closed 10 months ago.
I'm trying to use collapse in a navbar using Bootstrap. When the collapse control shows and I click it, nothing happens.
I'm sure I put the jQuery and Bootstrap bundle scripts in the right place.
Manually collapsing it in the console using $(".collapse").collapse(); works, though.
This is my entire page, if it helps.
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="static/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#"><h6 class="display-6" style="font-family:monospace;color:orange;">jeweled</h6></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span style="color:white;">...</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Stuff</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
<div class="d-flex justify-content-center">{{{ body }}}</div>
<script src="static/jquery.min.js"></script>
<script src="static/bootstrap.bundle.min.js"></script>
<script src="static/wrap.js"></script>
</body>
</html>
I researched for a little while and found how to fix this here. Turns out, I needed to change the data-toggle and data-target attributes to data-bs-toggle and data-bs-target.
Keep aware that depending on the version of the bootstrap a lot of things also change. For example, ms on bootstrap 5 is the same as ml on bootstrap 4.
I have been trying to use bootstrap(4) to creat a website. I got stuck at creating menu with dropdown lists. I cannot make it work, I even tried copying exact code of the docs for bootstrap and it still doesnt work. I have checked and rechecked paths for bootstrap css and js and I really dont know how to make it work.
While at it, can I use bootstrap to create dropdown lists inside dropside lists? It is for Menu purposes.
bootstrap docs, w3schools and other websites. even copying exact code makes no difference, the button doesnt work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" media="screen" href="bootstrap/css/bootstrap-grid.css">
<link rel="stylesheet" media="screen" href="bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" media="screen" href="bootstrap/css/bootstrap-reboot.css">
<link rel="stylesheet" media="screen" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" media="screen" href="bootstrap/css/bootstrap-reboot.min.css">
<title>Animal World</title>
<style>
</style>
<img src="animalworld.jpg" class="img-fluid w-100" alt="Animal">
<div class="dropdown fixed-top bg-faded ">
<button class="btn dropdown-toggle" type="button" id="DropDownAnimals" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Animals
</button>
<div class="dropdown-menu" aria-labelledby="DropDownAnimals">
<button class="dropdown-item" >Dogs</button>
<button class="dropdown-item" type="button">Horses</button>
<button class="dropdown-item" type="button">Birds</button>
</div>
</div>
<!--<nav id="navbar" class="navbar fixed-top navbar-collapse-md navbar-light bg-faded">
<a class="navbar-brand" href="#">Animal World</a>
<button class="navbar-toggler-right" type="button" data-toggle="collapse" data-target="#MainMenu" aria-controls="MainMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="MainMenu" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Animals</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Stuff</a>
</li>
</ul>
</div>-->
<script src="bootstrap/js/bootstrap.bundle.js"></script>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>
</script>
In the above code there are two different parts of code both for similar button. First doesnt work at all. second does, but in a way that just makes button move to right and the 3 other buttons appear on left. unable to change it at all. I would expect the dropdown come directly underneath the button as per docs.
I think you're importing your scripts in the wrong order.
Try putting the jquery script tag first, then the popper script, then you Bootstrap scripts.
And to answer your subsidiary question, it is absolutely possible to put a dropdown into a dropdown.
I copied the official Bootstrap 4 example for dropdown menus but it is not working, that is nothing is dropped down.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
Edit: In case anyone else is having this problem, I believe the solution for OP was that he had not imported popper.js.
Check that jQuery and all the relevant Bootstrap components are there. Also check the console and make sure there are no errors.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<-- Always remember to call the above files first before calling the bootstrap.min.js file -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
try to add these lines at the end of the file
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Add this code to your jquery
$('.dropdown').click(function(){
$('.dropdown-menu').toggleClass('show');
});
Assuming Bootstrap and Popper libraries were installed using Nuget package manager, for a web application using Visual Studio, in the Master page file (Site.Master), right below where body tag begins, include the reference to popper.min.js by typing:
<script src="Scripts/umd/popper.min.js"></script>
Here is an image to better display the location:
Notice the reference of the popper library to be added should be the one inside umd folder and not the one outside on Scripts folder.
This should fix the problem.
include them with this order
this will work
i dont know why :D
<!-- jQuery -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- Popper -->
<script src="js/popper.min.js"></script>
<!-- Bootstrap js -->
<script src="js/bootstrap.min.js"></script>
It's an issue with popper.js file. What I found at the official site was that bundle files include popper in itself but not jquery. I managed to fix it by adding link to these files:
bootstrap.bundle.js
bootstrap.bundle.min.js
I removed popper.js however since it comes within the bundle file.
Via JavaScript
Call the dropdowns via JavaScript:
Paste this is code after bootstrap.min.js
$('.dropdown-toggle').dropdown();
Also, make sure you include popper.min.js before bootstrap.min.js
Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar).
Make sure to include the Bootstrap CSS either via the Bootstrap CDN
or download it and link it locally
I used NuGet to install BootStrap 4. I was also having issues with it not displaying the Dropdown on click. It kept throwing an error in jquery base on what the Chrome console was telling me.
I originally had the following
<%-- CSS --%>
<link type="text/css" rel="stylesheet" href="/Content/bootstrap.css" />
<%-- JS --%>
<script type="text/javascript" src="/Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.min.js"></script>
But I changed it to use the bundled version instead and it started to work
<%-- CSS --%>
<link type="text/css" rel="stylesheet" href="/Content/bootstrap.css" />
<%-- JS --%>
<script type="text/javascript" src="/Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.bundle.min.js"></script>
add this line of code to the end of the body tag
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
A simple answer is to replace this line:
<script type="text/javascript" src="your_directory/bootstrap.min.js"></script>
for this other:
<script type="text/javascript" src="your_directory/bootstrap.bundle.min.js"></script>
This is my solution
I just downloaded jquery's latest version from their official website and then added it as a js file in my project folder and then to my HTML file. After that it was working fine for me
You need to enqueue the script bootstrap.js or bootstrap.min.js. I had the same problem with bootstrap 4.5.3 and the menu worked when I enqueued one of the above scripts. It can be either.
It needs to be /bootstrap.js, not /bootstrap.min.js.
I am working on a project using the bootstrap and in starting the fixed navigation on top I have found that it is hiding the links (ie. Home, Account, Logoff), presumably collapsing them. Because when i shrink it down and get the toggle it will display them after i initiate it. When I remove the .collapse from just below the first comment it displays the links. However then it will not collapse on resizing. How do I get the top nav links to show and still have the toggle work? Note: All of the file paths to the css and js are correct directories
<!DOCTYPE html>
<html>
<head>
<title>project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Problem is here -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Account</li>
<li>Logout</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<h1>Hello, world!</h1>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Turns out it was because I was trying to combine js and css from both Bootstrap 2 and 3. Once I got everything on the same playing field it works just fine.