Bootstrap grid elements overlapping navbar

Question

I am trying to build grid elements in which there are two columns and each has a couple of rows of panel elements within them. Everything looks great except for when I scroll my navbar to the point of the grid elements. The elements overlap the navbar like they are floating on top. The weird thing is no other part of the page is doing this, everything is behind the navbar when I scroll except for the grid elements.

Here is an image of the effect I'm seeing:

Anyone have any idea what is going on? I am also using headroom.js for my navbar.

EDIT: Here is the link to the live website: (link taken down after finding answer, as website still under construction)

Answer 1

It's an issue with the navigation's z-index. Even just giving it a value of 1 fixed the overlap for me. FYI, the higher the number the less likely it will be under another element, so you should probably make it something like fifty billion (or 999).

.headroom {
    z-index: 999;
}