• ?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-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/