I've got the SlickNav framework being used for a hamburger menu on this site (http://culturepop.com/) but when it's turned on, the div containing the menu covers up the logo on the left. While you can see the logo, you can't click on it anymore. I'm trying to get it where the drop down menu stays at 100% width but the button just fits that space and doesn't cover up the button. Tried playing around with the z-index but then the hamburger menu isn't clickable anymore. Basically, a no-win situation. Here's my code:
HTML (simplified)
<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;
}
This does the trick. : )
.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