响应式导航栏隐藏其下方的元素

我创建了一个响应式导航栏，但它使下面的元素（Flexslider 插件）消失。在我制作导航栏之前，下面的 Flexslider 可以正常显示，但现在不行。导航栏的 z-index 为 2，所以我不知道问题是什么。我应该如何/更改什么才能允许 Flexslider 显示并且导航栏仍然具有响应能力？谢谢你！

我的代码有点长，所以评论里有代码笔（不知道什么原因不让我贴在这里）

这是一个没有响应式导航的网站链接，但它显示了 Flexslider：http://bancroftmiddleschool.org http://bancroftmiddleschool.org

使用响应式导航链接到文件，但不显示 Flexslider：http://bancroftmiddleschool.org/index%20copy.html http://bancroftmiddleschool.org/index%20copy.html

将 #navBar 中的 CSS 位置从position:absolute;更改为定位：相对；。

#navBar{
    position: relative;
    /* leave rest of the css unchanged */
}

希望这是想要的效果。