Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa noite!
Estou tendo problemas com meu menu responsivo, uma vez que ele funciona ao clicar - e isso inclui o drop-down -. O erro fica por conta de que metade do menu é "ocultado" pelo conteudo das seguintes div's: div#container, um H3 e a div conteudo.
Segue o CSS do MENU:
header#menuCelular {
height:40px;
color:#fff;
width:100%;
background-color:#0260a9;
display:none;
}
#btn-menu {
display:none;
} background-color:#0260a9;
display:flex;
border-top:1px solid white;
} display:none;
} display:block;
padding:15px 0px;
text-align:center;
color:#fff;
} background: rgba(0,0,0,0.3);
} display:block;
position:absolute;
}
@media (max-width:976px) {
header#menuCelular {
display:block;
position:fixed;
} font-size:1.6em;
cursor:pointer;
display:block;
height:100%;
width:40px;
padding:7px 1px;
border-right:1px solid white;
} font-size:1em;
right:5px;
position:absolute;
cursor:pointer;
}
.menuMobile {
width:65%;
transform: translateY(-130%);
transition:all 0.3s;
} display:block;
background:#0260a9;
height:100%;
} border-bottom:1px solid white;
} display:none;
position:static;
} transform: translateX(0%);
} background-color:#1874CD;
} padding:15px 35px;
text-align:center;
}
}section#container {
margin-top:0;
margin:0;
border:0;
} border-radius:0;
background-color:#0260a9;
} width:100%;
text-align:justify;
position:relative;
margin:0;
float:none;
background-color:transparent;
border:0;
margin-top:0.450em;
min-height:16em;
}
Imagem do erro:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/kS1k9MX.png&key=41d928fccd4cd61401d05ccf436ae0a335216e7793305c08e10b3c44777eb6f0" alt="kS1k9MX.png" />
É só adicionar um "z-index:2" na classe .menuMobile.
Abraço...
Agradeço a atenção de vocês, pois testei e funcionou!
Pelo que entendi,a ideia do 'z-index' é distribuir a ordem em que os elementos irão aparecer?
Uma outra dúvida quanto ao menu: eu adicionei um position:fixed no header#menuCelular para ele acompanhar todo o scroll do site. Até ai tudo bem, o problema é que se a pessoa clicar nos sub-menu's, o scroll do site não acompanha, pois os <li> também ficam fixo. A unica forma que eu consegui arrumar foi tirando o position:fixed, mas o menu já não acompanha mais o scroll da pagina.
Alguma dica quanto a isso?
Mais uma vez, obrigado.
o z-index só funciona pra quem tem position definida. Cara, não vi qualquer problema no submenu agora.
Vi só a barra de últimas atualizações sobre-posta. No header#menuCelular tu coloca um z-index: 2;
e na section#container article#conteudo tu coloca um z-index:1