I am new to using bootstrap (http://getbootstrap.com/) and have the following code for a simple navigation bar:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>On Targett Design</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="jumbotron">
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<nav>
<ul class="nav">
<li class="active"><a href"#">Home</a></li>
<li><a href"#">About Us</a></li>
<li><a href"#">Services</a></li>
<li><a href"#">Blog</a></li>
<li><a href"#">Contact Us</a></li>
</ul>
</nav>
</div><!--end navbar inner-->
</div> <!--end navbar -->
</div> <!-- end container-->
</div><!--end jumbotron-->
</body>
</html>
Now the website states the following when working with the navigation bar:
[I]"Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.
Overflowing content
Since Bootstrap doesn’t know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.
Requires JavaScript
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse."[/I]
I have searched for the @grid-float-breakpoint in the media css but cannot find it. How can I make sure that this navigation bar appears horizontal on larger screens but then turns into a vertical navigation bar on smaller viewports?
For the record I have downloaded all of the components off the website, so am not missing any CSS
Thanks in advance