Why doesn't Twitter bootstrap class navbar-fixed-top work?
Question
So here's my code:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="libs/bootstrap/css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top"> <!-- header nav -->
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">About us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
<li>
<a href="#">Derp</a>
</li>
</ul>
<span class="brand"></span>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span3" style="background:grey; height:200px;"></div>
<div class="span9" style="background:lightgrey; height:20000px;"></div>
</div>
</div>
<div class="footer" style="height:100px"> <!-- footer -->
</div>
<script type="text/javascript" src="libs/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="libs/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" scr="js/main.js"></script>
</body>
</html>
And for some reason, the navigation bar styles perfectly, however it doesn't seem to fix itself to the top of the page when scrolling. It seems so trivial... what am I doing wrong here?
2 answers
solution1
1 2013-06-14 19:25:08
It seems to work fine here.
However, bootstrap-responsive, in smaller layout, unfix the nav bar in order to optimize the space...
You can try to remove bootstrap-responsive.css and see if it works.
solution2
1 2013-06-14 19:25:12
I took your exact HTML and everything looks good to me:
view live
edit
A couple of things you could check.
Remember that by default, the fixed-top behaviour is removed for tablets and below, so make sure you are checking at viewport > 767px. Also you have an older version of jQuery (v1.10.1) so probably good to use something more recent.
Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.