Tengo una galería pero me queda detrás del menú normal y del menú responsivo. ¿Por qué esta galería me queda detrás del menu normal y menu responsive? ¿Cómo puedo solucionarlo?
Éste es mi código:
$(function() {
var Page = (function() {
var $navArrows = $('#nav-arrows').hide(),
$shadow = $('#shadow').hide(),
slicebox = $('#sb-slider').slicebox({
onReady: function() {
$navArrows.show();
$shadow.show();
},
orientation: 'r',
cuboidsRandom: true,
disperseFactor: 30
}),
init = function() {
initEvents();
},
initEvents = function() {
// add navigation events
$navArrows.children(':first').on('click', function() {
slicebox.next();
return false;
});
$navArrows.children(':last').on('click', function() {
slicebox.previous();
return false;
});
};
return {
init: init
};
})();
Page.init();
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
header {
height: 50px;
background: #01A9DB;
color: aliceblue;
display: flex;
justify-content: flex-end;
align-items: center;
}
#btn-menu {
display: none;
}
header label {
font-size: 35px;
cursor: pointer;
display: none;
}
.menu ul {
background: #01A9DB;
display: flex;
list-style: none;
}
.menu ul ul {
display: none;
}
.menu a {
display: block;
padding: 15px 20px;
color: aliceblue;
text-decoration: none;
}
.menu a:hover {
background: #AF7AC5;
}
.menu a span {
margin-left: 10px;
}
.menu ul li:hover ul {
display: block;
position: absolute;
}
@media (max-width:768px) {
header label {
display: block;
}
.menu {
position: absolute;
top: 50px;
left: 0;
width: 70%;
transform: translateX(-100%);
transition: all 0.3s;
}
.menu ul {
display: block;
background: #01A9DB;
}
.menu ul li:hover ul {
display: none;
position: static;
}
.menu a span {
position: absolute;
right: 5px;
}
#btn-menu:checked~.menu {
transform: translateX(0%);
}
.menu ul ul {
background: rgba(0, 0, 0, 0.4);
}
.menu ul ul a {
padding: 15px 40px;
}
}
<link rel="stylesheet" type="text/css" href="css4/slicebox.css" />
<link rel="stylesheet" href="https://tympanus.net/Development/Slicebox/css/slicebox.css" />
<script type="text/javascript" src="https://tympanus.net/Development/Slicebox/js/modernizr.custom.46884.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://tympanus.net/Development/Slicebox/js/jquery.slicebox.js"></script>
<header>
<input type="checkbox" id="btn-menu">
<label for="btn-menu" class="icon-menu">MENU</label>
<nav class="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li class="submenu"><a href="#">Quiénes Somos<span class="icon-down-open"></span></a>
<ul>
<li><a href="#">Historia</a></li>
<li><a href="#">Gobierno Corporativo</a></li>
<li><a href="#">Transparencia Social</a></li>
</ul>
</li>
<li><a href="#">Actividades</a></li>
<li class="submenu"><a href="#">Oportunidades<span class="icon-down-open"></span></a>
<ul>
<li><a href="#">Programa Plan Padrino</a></li>
<li><a href="#">Programa de Voluntariado</a></li>
<li><a href="#">Donaciones</a></li>
</ul>
</li>
<li><a href="#">CAMPUS</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<br>
<div class="container">
<div class="wrapper">
<ul id="sb-slider" class="sb-slider">
<li>
<a target="_blank"><img src="https://placehold.it/600x400" alt="image1" /></a>
<div class="sb-description">
<h3><strong><i>"La educación mediante la academia y el juego, es la base fundamental de la integración social."</i></strong></h3>
</div>
</li>
<li>
<a target="_blank"><img src="https://placehold.it/600x400/#aa4040" alt="image2" /></a>
<div class="sb-description">
<h3><strong><i>"No existen límites para explorar el talento de un niño. Aquí, exploramos y reforzamos esa habilidad."</i></strong></h3>
</div>
</li>
</ul>
<div id="nav-arrows" class="nav-arrows">
<a href="#">Next</a>
<a href="#">Previous</a>
</div>
</div>
</div>