CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-design
adiw
adiw

Reputation: 113

Twitter-Bootstrap 2.1.0 affix plugin - doesn't work properly

I try to use bootstrap affix (2.1.0) in one of my mvc4 project. It seems that .span3 and .span9 doesn't work properly if, after scrolling 50px, the .span9 content move to the left.

I found this: Text moves to side of the page on scroll down but is not working. Adding floats to spans works somehow but is not "responsive". I think it must be a better solution.

Does anybody make it work ?

Here is my code (copy & paste from bootstrap site). Where I did wrong ?

<body data-spy="scroll" data-target=".bs-docs-sidebar">
<div class="container">
....
<div class="row">
  <div class="span3 bs-docs-sidebar" data-spy="affix" data-offset-top="50">
    <ul class="nav nav-list bs-docs-sidenav">
      <li><a href="#download-bootstrap"><i class="icon-chevron-right"></i> Download</a></li>
      ....
      <li><a href="#what-next"><i class="icon-chevron-right"></i> What next?</a></li>
    </ul>
  </div>
  <div class="span9">
    ....
    <section id="download-bootstrap">

Upvotes: 1

Views: 7055

Answers (2)

danjp
danjp

Reputation: 727

another way to fix this is to set the nav span min-height 

.span3 {  
    min-height: 1px;  
}

also I needed to set the nav to not affix when in tablet mode:

@media (max-width: 767px) {
    .sidenav.affix {
        position: static;

There really isn't enough in the docs at the moment explaining how to get this to work.

Upvotes: 1

adiw
adiw

Reputation: 113

Problem solved. Once I affixed the unordered list, everything working fine. Somehow I understood that I have to affix the parent div, not the list itself. My mistake.

Upvotes: 3

Related Questions