0

So I am having issues when trying to implement the affix sidebar with a sticky top nav, when scrolling on the page or clicking on the affix sidebar, the content header is off by 40 pixel (getting covered by the sticky top nav)

Basically the content is not showing appropriately under the fixed navigation.

Any idea here how to fix it will be much appreciated!

Live site example here

http://www.melindayang.com/portfolio-carmax.html

Cold below:

The sticky top-nav

   <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="aboutme.html">About Me</a>
                </li>
                <li><a href="document/MYang Resume.pdf"target="_blank">Résumé</a>
                </li>
                <li><a href="http://melindamcdm.wordpress.com/" target="_blank">Blog</a>
                </li>
                </ul> 
        </div>

The affix sidebar

<div class="col-xs-3" id="myScrollspy">
            <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125" id="myNav">
                <li class="active">
                    <a href="#section-1">Summary</a></li>
                <li><a href="#section-2">Research</a></li>
                <li><a href="#section-3">Ideation</a></li>
                <li><a href="#section-4">Prototype</a></li>
                <li><a href="#section-5">Results</a></li>
        </ul>
    </div>

The Content 

 <div class="col-xs-9">
        <div id="section-1">
 <p> 12345, Content goes here</p>
</div>
  <div id="section-2">
 <p> 12345, Content goes here</p>
</div>
  <div id="section-3">
 <p> 12345, Content goes here</p>
</div>
  <div id="section-4">
 <p> 12345, Content goes here</p>
</div>
  <div id="section-5">
 <p> 12345, Content goes here</p>
</div>
</div>

The JS

<script type="text/javascript">
$(document).ready(function(){
$("#myNav").affix({
    offset: { 
        top: 190 
    }
    });
});
Siguza
  • 21,155
  • 6
  • 52
  • 89
Samuel Shen
  • 37
  • 3
  • 12

1 Answers1

0

Add padding to the body

body
{
    padding: 70px 0 0 0;
}

Bootstrap nav is 50px high, plus whatever margin you want between content and nav.

Edit: Check here

Luke
  • 3,985
  • 1
  • 20
  • 35
  • I have included the padding already. The content is not getting overlapped, my issue is that the affix side bar is not indicating section correctly. :/ – Samuel Shen May 13 '14 at 05:36
  • You need to rethink the wording of your question. It seems to me like "Basically the content is not showing appropriately under the fixed navigation." refers to the top navigation – Luke May 13 '14 at 14:03