- ?Scopri tutti i nostri corsi su Divi
- ?Accedi alla Imparaqui Academy e alla VIP Community
- ?Iscriviti alla Community WordPress gratuita
Tutorial header menu fisso Divi 4 Generatore di temi
Se stai creando l’header e il menu di navigazione di un sito fatto con Divi usando il nuovo Generatore di Temi, avrai senz’altro notato che non c’è un’impostazione semplice per rendere il menu di Divi fisso allo scroll durante la navigazione.
Esiste una nuova impostazione per rendere fisso qualsiasi modulo o sezione su Divi, la puoi trovare andando su “Avanzate” » “Professione” (traduzione sbagliata di “Position”) e potrai cliccare su “Fixed”.
Quindi, se vuoi rendere fisso il menu di Divi allo scroll ti basterà attivare l’opzione “Fixed” sulla sezione che contiene il tuo menu nel “Generatore di temi” o Theme Builder.
Questa opzione funziona molto bene, tuttavia, ad oggi, presenta un piccolo inconveniente.
Se si prova ad attivarla sul menu principale, si nota una sovrapposizione dell’header ai contenuti del sito.
Se si vuole risolvere questa situazione basta procedere come indicato qui sotto.
Codice da inserire per rendere il menu fisso evitando l’errore di sovrapposizione del menu alla sezione sottostante ?
Per prima cosa inserisci un modulo “Codice” sotto al menu di navigazione del tuo header.
Copia e incolla questo codice in un modulo “Codice” come mostrato nel video tutorial in cima a questa pagina.
<script>
jQuery(function($){
var headerSection = $('.header-section-container');
headerSection.wrap('<div class="header-placeholder"></div>');
var headerWrap = $('.header-placeholder');
var headerHeight = headerSection.outerHeight();
headerWrap.css('height', headerHeight);
$(window).resize(function() {
headerHeight = headerSection.outerHeight();
headerWrap.css('height', headerHeight);
});
});
</script>
<style>
.et_pb_column {
margin-bottom: 0px !important;
}
</style>Ricordati di inserire la classe:
header-section-containerDovrai mettere questa stringa nella sezione esterna azzurra del tuo header andando su “Avanzate” » “ID e Classi CSS” » “Categoria CSS”.
Risorse utili ?
Piaciuto il video? Iscriviti al canale YouTube di Imparaqui ? https://imparaqui.it/youtube/
Accedi gratis alla Community di Imparaqui, per condividere la tua esperienza con WordPress e il business online a 360° ?https://imparaqui.it/community/
Commenti
Ciao Pascal!
C’è un modo per fare vedere da cellulare soltanto le voci del menù e non tutto quello che c’è sotto a ogni voce? Più che altro è che su cellulare diventa un menù lunghissimo, che finisce a metà della pagina!
Grazie mille
Ciao Maria, sì, c’è il modo, questo tutorial funziona perfettamente se usi il classico menu di Divi, non lo abbiamo ancora testato con il Generatore di temi però: link tutorial raggruppamento voci menu Divi un saluto!
Ciao, Ho seguito questo tutorial. Grazie:)
Un problema con il menù a tendina da tablet e telefono.
La mia situazione menù globale è la seguente: sezione blu contiene 2 sezioni verdi. La prima verde per i social e una call to action. La seconda verde per il menù. Il menù a tendina si apre nella sua sezione verde e non al di sopra dei contenuti della pagina. Ho provato a modificare lo Z index ma non accade nulla. Sai cosa può essere che blocca l’apertura al primo livello del menù a tendina? Grazie in anticipo 🙂
Ciao Pascal Sto affrontando il corso su imparaqui riusciresti per favore a farmi avere solo l’intestazione globale che stai usando tu perchè vorrei usarne una cosi per il mio sito ma non vorrei installare tutto un pack ma solo l’intestazione globale grazie in anticipo