title: bootstrap fixed nav in single page site links issue
body: <p><a href="https://i.stack.imgur.com/5xcv9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5xcv9.png" alt="enter image description here"></a>    </p>
  
  <p>I have single page site <a href="http://alampk.com/" rel="nofollow noreferrer">alampk.com</a><br>
  Here I have fixed navbar at top, but when I click any link like <code>exp</code>,<code>portfolio</code>...<br>
  it does move to that section but top <code>50px</code> portion comes behind navbar, I tried many things (css and jquery) but nothing fixed this issue.</p>
  
  <p>I tried the following jquery</p>
  
  <pre><code>$(".nav a").click(function(){
     $(window).scrollTop($(window).scrollTop()-50);
  });
  //but this executes before reaching to target section of page 
  //and also I not sure -50 will be accurate value for required positioning
  </code></pre>
  
  <p>I also created a <code>div</code> before navbar as</p>
  
  <pre><code>&lt;div id="navPlaceHolder"&gt;&lt;/div&gt;
  //css
  #navPlaceHolder{
      height:50px;
      visibility:hidden;
  }
  </code></pre>
  
  <p>but this only work for top most section</p>