Menu
So I'm following a tutorial online (http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/) and following the code exactly, but for some reason, my navbar is not appearing the way it should be. My friend (who's way more experienced with web dev) took a quick look at the code and couldn't figure out what was wrong. So I thought I'd post my problem here.
I'll also show you my working directory (just in case you're wondering if the files are all in the same directory):
Here's the code in case you want to try it yourself
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<h1><a href="#">Bootstrap Site</a></h1>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
648
I had a similar problem using bootstrap v4. The previous answers code worked well for me but just wanted to clarify that the part that made the vertical navbar horizontal was to use navbar-expand-lg in the main div tag.
<nav class="navbar navbar-expand-lg">
Changing the lg to another size (md, sm or xs) is also helpful depending on your screen sizing preferences.
Hope this helps
189
I'm asuming you are using the latest Bootstrap.
You have to add navbar-defaultto your <div class="navbar"> and navbar-nav to your <ul class="nav">.
Which gives you the following markup.
<div class="container">
<h1><a href="#">Bootstrap Site</a></h1>
<div class="navbar navbar-default">
<div class="navbar-inner">
<div class="container">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
Working Example
For future problems, try reading the official Bootstrap Docs before asking here. They explained everything very detailed.
BT Navbar
I guess your problem is, that the sitepoint tutorial uses an older Bootstrap Version, than the one you downloaded and use.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
