响应导航栏隐藏元素下面 [英] Responsive Nav Bar Hides Element Below it

问题描述

我创建了一个响应式导航栏，但它使下面的元素，Flexslider插件，消失。在我做导航栏之前，Flexslider下面会显示出来很好，但现在它不是。导航栏的z-index为2，因此我不知道问题是什么。如何/我应该更改为允许Flexslider显示和导航栏仍然响应？谢谢！

我的代码有点冗长，所以在评论中有代码笔（因为某种原因，我不会把它们张贴在这里） p>

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

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

解决方案

将#navBar中的位置CSS从position：absolute;到位置：相对。

  #navBar {
 position：relative; 
 / * leave css的剩余不变* / 
} 
  

希望这是所需的效果。

I created a responsive navigation bar, but it makes the element below, a Flexslider plug-in, disappear. Before I made the navigation bar, the Flexslider below would show up just fine, but now it doesn't. The z-index for the navbar is at 2, so I don't know what the problem is. How/What should I change to allow the Flexslider to show and the Navigation bar to still be responsive? Thank you!

My code is a bit lengthy, so there are code pens in the comments (it won't let me post them up here for some reason)

Here is a link to the website without the responsive navigation, but it shows the Flexslider: http://bancroftmiddleschool.org

Link to file with Responsive Navigation, but doesn't show Flexslider: http://bancroftmiddleschool.org/index%20copy.html

解决方案

Change the position CSS in #navBar from position:absolute; to position: relative;.

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

Hope that's the desired effect.

这篇关于响应导航栏隐藏元素下面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！