我在这个站点 ( http://culturepop.com/ ) 上使用了 SlickNav 框架来制作汉堡菜单，但是当它打开时，包含菜单的 div 会覆盖左侧的 Logo 。虽然您可以看到 Logo ，但无法再点击它。我试图在下拉菜单保持 100% 宽度但按钮恰好适合该空间并且不会遮盖按钮的位置获得它。尝试使用 z-index，但汉堡菜单不再可点击。基本上，一个双赢的局面。这是我的代码:
HTML(简体)
<body>
<div class="slicknav_menu"></div>
<div id="site-cphead">
<div class="site-branding">
<div class="site-title"><a href="#" rel="home"><img src="logo.svg" alt=""></a></div>
</div><!-- .site-branding -->
</body>
CSS
.slicknav_menu {
font-size: 16px;
box-sizing: border-box;
}
.slicknav_menu {
background: transparent none repeat scroll 0% 0% !important;
width: 100%;
position: absolute;
font-family: "proxima-nova-alt-condensed",sans-serif;
font-size: 18px;
padding: 11px 5px 0px !important;
z-index: 9999;
}
.slicknav_menu {
display: block;
}
最佳答案
这就是诀窍。 :)
.smart-slider-canvas-inner
z-index: 0
.slicknav_menu
z-index: 1
.site-title a
display: block
position: relative // needs a position for the z-index to kick in
z-index: 2
关于javascript - SlickNav 菜单覆盖 Logo ，使链接无法点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32924376/