CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Tom Wilson
Tom Wilson

Reputation: 253

Twitter Bootstrap - Responsive Navigation Bar

I've got no idea what I'm doing wrong here. I'm trying to get a bootstrap custom styled navigation bar to sit at the top, but be responsive on mobile devices.

As you can see, this doesn't happen. Make you window go below the 940px.

It messes up completely on my mobile device. I'm sure that I am missing something really basic here. Here is my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Social Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./css/bootstrap-responsive.css" rel="stylesheet">
<link href="./css/bootstrap.css" rel="stylesheet">
<link href="./css/main.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>

<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>

<body>

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" 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>
</button>
<a class="brand" href="#">Social Website</a>
<div class="nav-collapse collapse">
<ul class="nav">
<div class="spacer"></div>
<li><a href="#">Uploads</a></li>
<div class="spacer"></div>
<li><a href="#about">Categories</a></li>
<div class="spacer"></div>
<li><a href="#contact">Random</a></li>
<div class="spacer"></div>
</ul>
<ul class="nav pull-right">
<div class="spacer"></div>
<li><a href="#">My Account</a></li>
<div class="spacer"></div>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>

<div class="container">

<h1>Under Construction</h1>
<p>This website is currently under construction, come back later or something.</p>

</div> <!-- /container -->

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="./js/bootstrap.min.js"></script>

</body>
</html>

Upvotes: 1

Views: 9919

Answers (1)

Mooseman
Mooseman

Reputation: 18891

Include <link href="./css/bootstrap-responsive.css" rel="stylesheet"> after <link href="./css/bootstrap.css" rel="stylesheet"> and specify a width for .container. There's an example of a fluid layout on http://twitter.github.io/bootstrap/examples/fluid.html

Upvotes: 2

Related Questions