Divi 4 header menu fisso allo scroll

Iscriviti al nostro canale YouTube per non perderti nessun video!
Indice dei contenuti

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.

Menu fisso Divi scroll

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-container

Dovrai 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/

2 risposte

  1. 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 🙂

  2. 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

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Ti è stato di aiuto?

Condividi questo post con i tuoi amici!

Accedi a tutti i corsi di Imparaqui con un singolo abbonamento!