Q:

Inactive links until scroll

I'm having a strange HTML/JQuery problem. 
The top nav on my homepage has 5 links that are described in HTML. For some reason, the links do not 'activate' until I scroll the page. I am manipulating the nav element on scroll by simply changing the postion from 'absolute' to 'fixed' and the background to a transparent black; however that shouldn't have any bearing on the links.
Upon inspection using Chrome, each menu item is linked.
This is the code that manipulates the nav on scroll -- 
$(document).scroll(function(){

      if (!docked && $(document).scrollTop() > 36){
        docked = true;
        $('#menu-nav').css('background','rgba(60,60,60,0.9)');
        $('#menu-nav').css('position', 'fixed');
        $('#menu-nav').css('top',0)
        $('#menu-nav').css('height',49+'px')
      }
      else if (docked && $(document).scrollTop() < buffer) {
        docked = false;
        $('#menu-nav').css('background','');
        $('#menu-nav').css('position', 'absolute');
        $('#menu-nav').css('top',0)
      }
})

The page is here -- www.barandbean.com -- and you can see that the link does not work until the nav changes to a 'fixed' position and scrolls with the window.
Any help would be appreciated. I can add more code snippets, but I'm not sure what would be the most helpful. 

A:

Note that z-index needs to have a position other than static (which is the default one). So add position:relative or position:absolute to your #menu-nav. 
The reason it works after scroll is because you are changing the position to absolute

