Menu
So, I'm playing around with Twitter's new CSS framework, Bootstrap.
What I'm encountering is as follows: I've added the topbar div to my page:
<div class="topbar">
<div class="fill">
<div class="container">
<h3><a href="#">Project Name</a></h3>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<form action="">
<input type="text" placeholder="Search">
</form>
<ul class="nav secondary-nav">
<li class="menu">
<a href="#" class="menu">Dropdown</a>
<ul class="menu-dropdown">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
However, this has some un-expected behavior: It proceeds to float down the page at the top - example here.
Is there a way to prevent that from happening, or do I need to consider a different framework?
894
You mean the top bar is always to the top? That is the inteded behaviour.
You can change it by removing
position: fixed
in topbar's CSS definition.
160
from http://twitter.github.com/bootstrap/components.html#navbar
To make the navbar fixed to the top of the viewport, add .navbar-fixed-top to the outermost div, .navbar. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.
<div class="navbar navbar-fixed-top">
...
</div>
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