How to have Sidebar Overlap Images - html

Question

I've used this tutorial http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/ to create a Sidebar in my _Layout code. I'm trying to have the sidebar overlap anything in RenderBody(). When the sidebar is open on the mobile, it appear behind the images.
Image depicting issue: http://snag.gy/uN9GF.jpg
My Body example code can be found here
http://codepen.io/anon/pen/NxLvEQ
_Layout.cshtml code
<div class="container">
<ul id="gn-menu" class="gn-menu-main">
<li class="gn-trigger">
<a class="gn-icon gn-icon-menu"><span>Menu</span></a>
<nav class="gn-menu-wrapper">
<div class="gn-scroller">
<ul class="gn-menu">
<li class="gn-search-item">
<input placeholder="Search" type="search" class="gn-search">
<a class="gn-icon gn-icon-search"><span>Search</span></a>
</li>
<li>
<a class="gn-icon gn-icon-download">Popular</a>
</li>
<li><a class="gn-icon gn-icon-cog">Settings</a></li>
<li><a class="gn-icon gn-icon-help">About us</a></li>
</ul>
</div><!-- /gn-scroller -->
</nav>
</li>
<li>Test Sidebar</li>
<li></li>
</ul>
#RenderBody()
</div><!-- /container -->
<script src="../../Scripts/classie.js"></script>
<script src="../../Scripts/gnmenu.js"></script>
<script>
new gnMenu(document.getElementById('gn-menu'));
</script>

Answer 1

Here's how to fix your problem:
Set z-index: 1; on gn-menu-main. Normally, I'd also tell you to set its position to something other than static, or else the z-index will have no effect. Looking at the site you linked, though, it appears you already have it set to fixed, which is fine.
Wrap #RenderBody() in a container div and set position: relative; on it. The relative positioning ensures that none of the container div's child elements can overlap its sibling elements unless the div itself does-- and we know it won't since its only sibling (gn-menu-main) has z-index: 1;.

Answer 2

Try to adjust the z-index of "gn-menu-wrapper" class.
for example:-
.gn-menu-wrapper{z-index:1}
if this is not working add more value to z-index.
.gn-menu-wrapper{z-index:99999}

Answer 3

I have solved your problem.
You just have to add "z-index:1" in
COMPONENT.CSS
line number - 96
class - .gn-menu-wrapper
add - z-index:1
This is working see the screen shot

Answer 4

<div class="container">
<ul id="gn-menu" class="gn-menu-main">
<li class="gn-trigger">
<a class="gn-icon gn-icon-menu"><span>Menu</span></a>
<nav class="gn-menu-wrapper">
<div class="gn-scroller">
<ul class="gn-menu">
<li class="gn-search-item">
<input placeholder="Search" type="search" class="gn-search">
<a class="gn-icon gn-icon-search"><span>Search</span></a>
</li>
<li>
<a class="gn-icon gn-icon-download">Popular</a>
</li>
<li><a class="gn-icon gn-icon-cog">Settings</a></li>
<li><a class="gn-icon gn-icon-help">About us</a></li>
</ul>
</div><!-- /gn-scroller -->
</nav>
</li>
<li>Test Sidebar</li>
<li></li>
</ul>
#RenderBody()
</div><!-- /container -->
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/css/demo.css" />
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/css/component.css" />
<script src="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/js/classie.js"></script>
<script src="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/js/gnmenu.js"></script>
<script>
new gnMenu(document.getElementById('gn-menu'));
</script>