Scroll menu responsive 
Author: Agostino M.in responsive il menù non fa lo scroll
sito http://agostinomacchione.it
questi i codici inseriti al passo "4" sezione "statistiche-seo-codice" sezione "esperto"
prima della chiusa del tag head:
<style>
#imMnMn > ul > li.imMnMnSeparator {
background-image: none;
!padding-bottom: 0px;
height:auto;
font: 12px Tahoma, bold,;
!text-align:center;
}
#imMnMn > ul > li.imMnMnSeparator .imMnMnFirstBg .imMnMnTxt {
display: block;
color:blue;
}
#imMnMn > ul > li.imMnMnSeparator .imMnMnFirstBg .imMnMnTxt:hover {
color:blue;
}
</style>
<style>
#imHeader .search_form {
display:block;
}
</style>
<style>
#imHeader .imTemplateContent {
display:block;
}
!</style>
Proprietà del tab Body:
<!-- Begin Cookie Consent plugin by Silktide - http://silktide.com/cookieconsent -->
<script type="text/javascript">
window.cookieconsent_options = {"message":"Su questo sito utilizziamo cookie tecnici e, previo tuo consenso, cookie di profilazione, nostri e di terze parti, per proporti pubblicità in linea con le tue preferenze. Cliccando in un punto qualsiasi dello schermo, effettuando un’azione di scroll o chiudendo questo banner, invece, presti il consenso all’uso di tutti i cookie. Se vuoi saperne di più clicca su","dismiss":"Accetta","learnMore":"altre informazioni.","link":"http://agostinomacchione.it/cookie-policy.html","theme":"dark-top"};
</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.9/cookieconsent.min.js"></script>
<!-- End Cookie Consent plugin -->
<style>
#imMnMn .hamburger-bar {
background-color:white;
padding-bottom: 0px;
}
#imMnMn .hamburger-button {
right:30px;
}
</style>
<style>
@media screen and (max-width: 1279px) {
.hamburger-button::after {
content:"MENU";
color:white;
margin-left: -5px;
}
#imMnMn .hamburger-bar {
height: 5px;
margin: 5px auto;
width: 125%;
}
}
</style>
dove sbaglio ?
Premesso che anche altri lamentano questo problema, i CSS (tag style) vanno inseriti tutti in head, non nel body.
Ad ogni modo, prova con questa toppa temporanea:
<style>
#imMnMn > ul {
overflow:auto;
height:100%;
}
</style>
Tengo a precisare che NON ho provato a creare un nuovo progetto con menu verticale per testarlo con dispositivi mobili, ho solo dato un'occhiata al sito in questione, quindi non so se la "toppa" può essere sostituita con impostazioni da programma.
Author
grazie Lemon
prima di tutto ho portato i css tag style in head e ho abbassato il tutto a 960px cambiando quindi il valore @media screen and (max-width: 1279px) in 959px perchè altrimenti anche in formato desktop entrava quasi subito in modalità responsive.
ho inserito come da te suggerito
<style>
#imMnMn > ul {
overflow:auto;
height:100%;
}
</style>
ma noto che l'ultima riga del menù non viene mai visualizzata con nessun browser in responsive e lo stesso menù si comporta in modo anomalo a seconda dei browser utilizzati nei cellulari.
Ho anche provato a cancellare tutto quanto riportato in head alla voce esperto pensando che magari fosse un problema di css ma il problema resta... l'ultima voce nel menù responsive fa i capricci :)
attendo tue possibili soluzioni grazie
Author
ho provato ad usare un "trucchetto" mettendo una pagina vuota e senza nome.
su responsive va bene perchè così viene visualizzata la penultima voce menù ma su desktop mi ritrovo uno spazio che non si vede ma se ci si clicca sopra ovviamente si entra in una pagina vuota.
ho provato a mettere il separatore vuoto ma questo non crea uno spazio sul menù responsive.
resto in attesa di consigli ;)
Prova a leggere questo post: https://helpcenter.websitex5.com/post/132841#7
Author
Lemon con la funzione
height: calc(100% - 40px);
lo scroll funziona e l'ultima voce adesso si vede :)
se riesci a dirmi come risolvere il fatto che con lo scroll del menù scrolla anche il sito, che dovrebbe rimanere fermo, mi hai salvato da bestemmie inimmaginabili eheheheh
Credo che debba essere fatta una segnalazione ufficiale e precisa sui problemi del menu in modalità responsive.
Intanto dovresti togliere questa riga perché, oltre che superflua è anche sbagliata: !height:100%;
Anche il codice CookieConsent è da spostare da dove è ora.
L'hai inserito in Proprietà del tag BODY ma va inserito Dopo l'apertura del tag BODY o Prima della chiusura del tag BODY
Author
ok grazie perfetto...
scusa la mia ignoranza in materia ma differenze tra
Dopo l'apertura del tag BODY e Prima della chiusura del tag BODY ???
Se inserisci degli elementi con position static (default) si posizioneranno prima (Dopo l'apertura del tag BODY) o dopo (Prima della chiusura del tag BODY) gli altri elementi del body.
Nel tuo caso è indifferente.
provato il codice postato di Lemonsong su menu orizzontale, con responsive tutto ok, ma poi mi elimina il menu desktop...
http://www.mirboprova.altervista.org/menu-scroll/
agostino, come è possibile inserire il tasto nella barra dei cookie? potresti indicarmelo?
grazie.
Con il menu orizzontale ma anche con quello verticale è consigliabile inserire i CSS di correzione in una media query.
OK...Tanks...
@Lemonsong
Provato e funzia perfettamente....grazie 1000000
Author
io ho messo questo al passo 4, statistiche seo, esperto, prima della chiusura del tag body:
<script type="text/javascript">
window.cookieconsent_options = {"message":"qui metti il tuo messaggio","dismiss":"OK","learnMore":"privacy cookie","link":"qui metti l'indirizzo della tua pagina politica cookie","theme":"dark-top"};
</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.9/cookieconsent.min.js"></script>
Author
Lemon, cioè ? come devo inserire i css in una media query ? te lo chiedo perchè cambiando il menù da verticale ad orizzontale lo stesso menù scompare come detto sopra.
grazie
L'hai anche riportato nel tuo primo post.
Comunque, devi spostare questa regola:
#imMnMn > ul {
overflow:auto;
height: calc(100% - 40px);
}
... all'interno di questo codice (media query), dove hai altre regole:
@media screen and (max-width: 959px) {
}
Author
grazie ;)
agostino?
Author
dimmi