Good morning, I developed a website and when I open in the iphone Safari browser and the MacBook it shows me all breaking ... li
appears one underneath the other, in the mobile part when I open the menu it appears only the header, the rest seems to be behind the section ... anyway, I put '' z-index: 9999; no menu e também coloquei
z-index: -1; ' in the section, it's still not working ... I think it's something webkit, I went after how it works, and I did not find anything related, could anyone help me?
html:
<div class="mobile-content">
<ul class="menu-mobile">
<li class="menu-item">Menu</li>
<li class="menu-item" onclick="submenuMobile(this)">
O Instituto
<ul class="submenu">
<li class="menu-item"><a href="nossa-causa.php">Nossa causa</a></li>
<li class="submenu-item"><a href="quem-somos.php">Quem somos</a></li>
<li class="submenu-item"><a href="conselho-e-equipe.php">Equipe</a></li>
<li class="menu-item"><a href="trabalhe-conosco.php">Trabalhe Conosco</a></li>
</ul>
</li>
<li class="menu-item" onclick="submenuMobile(this)">Atuação
<ul class="submenu">
<li class="submenu-item"><a href="como-trabalhamos.php">Como trabalhamos</a></li>
<li class="submenu-item"><a href="parcerias.php">Parceirias</a></li>
<li class="submenu-item"><a href="evento-parques-do-brasil.php">Evento Parques do Brasil</a></li>
</ul>
</li>
<li class="menu-item"><a href="publicacoes.php">Publicações</a></li>
<li class="menu-item"><a href="imprensa.php">Imprensa</a></li>
</ul>
<ul class="social-media">
<li class="social-media-item"><a href="https://www.linkedin.com/company-beta/1667258/" target="_blank"><img src="images/linkedin.png" alt="Linkedin"></a></li>
<li class="social-media-item"><a href="https://www.youtube.com/channel/UCm2vbjTHVHw_yfZS2vGyR2w" target="_blank"><img src="images/youtube.png" alt="Youtube" style="margin-bottom: -5px"></a></li>
</ul>
<p class="phone-header">11 5180-0265</p>
</div>
css:
main {
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
// z-index: 10;
height: 85px;
overflow: hidden;
background: $white;
z-index: 99999;
.container {
&.header {
display: flex;
justify-content: space-between;
align-content: center;
height: 100px;
background: $white;
}
}
}
}
@media screen and (max-width: 980px) {
.mobile-content {
display: block;
transition: .4s;
right: -100vw;
overflow: hidden;
position: fixed;
top: 0;
width: 70%;
background: $blue;
color: $white;
padding: 8%;
box-sizing: border-box;
font-size: 5vw;
height: 100%;
z-index: 9999999999999999999999999;
}
}
Follow the print below to help ...
Thank you ...