Bootstrap affix moves element to left side of container

Question

I want two side nav bars that are affixed, but when I scroll down, my left navbar column moves to the left side of its parent div.

I know the issue is that affix changes the position to fixed so any floats would be irrelevant.

My issue should be clear in this

http://www.bootply.com/deaSbNAJ0b - don't mind the right side bar

I believe the answer lies in the javascript. My first thought would be to alter the affix function to use the parent element's position to calculate the affixed elements position after it triggers, but I wouldn't know where to start, javascript is still new to me.

`data-spy="affix" data-offset-top="0"` remove this from your ` — Kalpesh Singh, Mar 12 '17 at 05:36
Well that would remove the affix which is kind of the whole point. I want the left navbar to hug the center column and stay affixed. — asdfasdfsdfga, Mar 12 '17 at 07:53

score 0 · Accepted Answer · edited May 23 '17 at 12:17

Basically this question has already been answered here. As explained in the docs..

Use the affix plugin via data attributes or manually with your own JavaScript. In both situations, you must provide CSS for the positioning and width of your affixed content.

So in this case you have to set a specific width for the affixed element. When it becomes position:fixed it's removed from the normal document flow, and won't maintain it's normal percentage-based "unfixed" width.

You'll need to adjust the width for what works best with the other page content, keeping in mind that position:fixed doesn't work responsively with the Bootstrap columns. Here it's applied only on widths greater than 991px so that the columns can stack normally on smaller screens.

@media (min-width: 992px) {
  .affix-top {
    position: static;
    margin-top:10px;
    width:240px;
  }

  .affix {
    position: fixed;
    top: 10px;
    width:240px;
  }
}

http://www.bootply.com/FlGXADz2L3

Bootstrap affix moves element to left side of container

1 Answers1