MENU HAMBU CON APPLE 
Author: Matteo O.Ciao a tutti, vi ringrazio già in anticipo delle risposte che seguiranno.
Ho un problema con la visualizzazione su dispositivi apple, tutto il mio sito è ok tranne la mappa nella home page che non ha una fine orizzontale e il menu hamburger creato in html e css che si riesce solo a visualizzare nella cella di insermento e non a tutto schermo come in window.
Grazie del supporto!!!!
sito pubblicato: www.algheropanorama.it
oggeto html:
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="https://www.algheropanorama.it">HOME</a>
<a href="https://www.algheropanorama.it/la-casa">LA CASA</a>
<a href="https://www.algheropanorama.it/la-casa">SERVIZI</a>
<a href="https://www.algheropanorama.it/dove-siamo">DOVE SIAMO</a>
<a href="https://secure.visioni.info/algheropanorama.it/book/booking/index.php">PRENOTA ORA</a>
<a href="https://www.algheropanorama.it/bonus">BONUS VACANZE</a>
<a href="https://www.algheropanorama.it/contatti">CONTATTI</a>
<a href="https://www.algheropanorama.it/alghero">LA CITTA'</a>
</div>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()"><img width="35%" border="0" align="center" src="http://www.algheropanorama.it/button/menuhambu.svg"></span>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
PRIMA DELLA CHIUSURA DEL TAH HEAD:
<style>
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 10000;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.85);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 10%;
width: 100%;
text-align: center;
text-decoration: overlay;
margin-top: 20px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 29px;
color: #ded0b3;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #fffdfc;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 40px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 50px;
top: 15px;
right: 35px;
}
}
</style>
<style>
#imHTMLObject_40 {
z-index: 10000 !important;
}
</style>
<style>
#imHTMLObject_3_67 {
z-index: 10000 !important;
}
</style>
<style>
#imHTMLObject_15_68 {
z-index: 10000 !important;
}
</style>
<style>
#imHTMLObject_15_43 {
z-index: 10000 !important;
}
</style>
<style>
#imHTMLObject_16_44 {
z-index: 10000 !important;
}
</style>
<style>
#imHTMLObject_5_77 {
z-index: 10000 !important;
}
</style>
<style>
#imHTMLObject_11_79 {
z-index: 10000 !important;
}
</style>
<style>
#imHTMLObject_20_41 {
z-index: 10000 !important;
}
</style>
<style>
#imHTMLObject_21_88 {
z-index: 10000 !important;
}
</style>
<style>
#imHTMLObject_11_89 {
z-index: 10000 !important;
}
</style>
Grazie ragazzi e ragazze!
premesso che non ho dispositivi apple...
...scusa non ho capito...
... io manco lo vedo con FF il tuo menu hamburger
puoi mettere anche delle immagini del problema ...
e ma perchè non usi l'oggetto overlay menu, visto che mi pare che tu non abbia dei livelli ?
Author
Hai ragione 2 foto mi avrebbero aiutato nella spiegazione.
Non uso l oggetto overlay menù perche ho la versione 17
Forsee tu nn lo vedi perche per averlo sempre al lato dello schermo ho usato l impostazione (estendi oggetto)
Grazie
Io ricevo errore 403.
Author
l ho caricato in questa pagina www.algheropanorama.it/test3 , non capisco ma su pc window e smartphone android è tutto ok, ma su ipad4 e iphone 6 si presentano problemi con la mappa, fotosovrapposte a testi e menu!!!
Io riscontro un problema di z-index con il logo.
C'è un problema di z-index anche con il menù overlay, le scritte del menù finiscono sotto quelle della pagina...
Dovresti aggiungere:
#imHTMLObject_72 {z-index: 10;}
Author
Ciao, si quello lo sapevo, e ho gia la soluzione!!!
il mio problema principale è che su apple il menu si apre solo nella cella di riferimento e non a tutta pagina come in window o android.
Inoltre l oggetto mappa nelle modalità responsive non si adatta alla pagina ma sborda, questo sempre su apple.
Grazie del supporto.