Olá , estou com uma dificuldade cruel... Estou fazendo um site seguindo o ,método de programão Mobilefirst, que consiste em criar um site primeiro para ,mobile depois para desktop, e nesse site tem um botaozinho menu, que ao clicar abre os links para baixo do botão. mas debaixo do meu HEADER tem um slide, e quando aberto o menu o slide fica em cima do meu menu fazendo assim, que suma os links... o que eu faço???
Código do MENU
HTML
<header>
<nav class='menu'>
<ul>
<li><a href='index.html'>Home</a></li>
<li><a href='pedidos.html'>Melhores produtos</a></li>
<li><a href='galeria.html'>Clientes</a></li>
<li><a href='cardapio.html'>Contato</a></li>
<li><a href='sobre.html'>Sobre</a></li>
</ul>
</nav>
<div class="botao_mobile">
----<br>----<br>----
</div>
</header>
CSS
/*HEADER*/
.menu ul {
text-align: center;
}
.menu li{
font-size: 20px;
padding: 10px;
}
.menu a{
color: #111;
}
.botao_mobile {
float: right;
padding: 5px;
width: 20%;
display: inline-block;
line-height: 7px;
cursor: pointer;
font-weight: bold;
text-align:center;
color: #111;
margin-top: 4%;
}
.menu {
display:none;
float: right;
width: 40%;
height: auto;
background-color: #E5E5E5;
position: fixed;
margin-left: 50%;
border-radius: 0 0 10px 10px;
margin-top: 2%;
}
JQUERY
$(function (){
//MENU
$(".botao_mobile").click(function(){
$(".menu").slideToggle();
});
});
Còdigo DO SLIDE
HTML
<article class="article container-fluid">
<div id="slide">
<img src="img/bv.jpg" alt="">
<img src="img/top1.jpg" alt="">
<img src="img/feed.png" alt="">
</div>
<div class="bg-grafit">
<i class="fa fa-arrow-left" aria-hidden="true" id="volta"></i>
<i class="fa fa-arrow-right" aria-hidden="true" id="vai"></i>
</div>
</article>
CSS
.article img{
width: 100%;
height: 200px;
}
.article i{
color: #eee;
padding: 10px;
}
#vai {
float: right;
margin-right: 20%;
}
JQUERY
$(function(){
$("#slide").cycle({
fx: 'scrollLeft',
next: '#vai',
prev: '#volta'
})
});
Se precisarem de mais alguma coisa só pedir Obrigado...