Liam Potter Liam Potter - 4 months ago 14
HTML Question

Bootstrap Affix Not Moving

I'm trying to make the navigation sidebar on my website move down with the browser view via Bootstrap's Affix plugin however it refuses to follow the view and just stays at the top.

This is the structure I have for my HTML:

<div id="page-wrapper">
<div class="container">
<div class="row">
<div id="navigation-affix" data-spy="affix" data-offset-top="20" data-offset-bottom="200">
<div class="col-xs-2" id="navigation-wrapper">
<div class="inner">
<div class="row">
<div class="col-xs-12">
<img src="images/me.png" alt="Liam Potter" id="picture-me" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div id="navigation">
<a href="/" id="current-page">Home</a>
<a href="/portfolio">Portfolio</a>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="col-xs-10" id="content-wrapper">
<div class="inner">

</div>
</div>
</div>
</div>
<div id="page-push"></div>
</div>
<footer>
<div class="container">

</div>
</footer>


Source: https://jsfiddle.net/tbejd5en/1/

Any thoughts?

Answer

You can just add a position:fixed to your id #navigation-affix and add col-xs-offset-2 to your id #content-wrapper

div#navigation-affix {
    position: fixed !important;
}

Here is fiddle: https://jsfiddle.net/tbejd5en/5/

Comments