Elementor Menu cambiare sfondo allo scroll

Problema

Problema

Noi usiamo Elementor per costruire visivamente (drag and drop) il nostro sito e quasi tutti quelli dei nostri clienti. Spesso capita di voler fare il menù del sito a sfondo trasparente che rimane bloccato in alto quando si scorre la pagina. Quando si sceglie questa soluzione grafica è necessario far cambiare il colore di fondo del menù quando chi naviga comincia a scorrere perché se rimane trasparente diventa illeggibile quando gli passano sotto testi o immagini che contrastano come colore. Questa semplice cosa sembra non esser possibile attualmente* su Elementor.
* il team di sviluppo di Elementor aggiorna molto spesso il sistema e aggiunge le funzionalità più richieste da chi lo utilizza, quindi è possibile che mentre stai leggendo questo articolo il problema è già stato risolto da loro con una nuova release.

Plugin per Farlo

Plugin per farlo

In prima battuta abbiamo trovato questo plugin che risolveva il problema: Sticky Header Effects for Elementor

Siccome con la pubblicazione del nostro nuovo sito abbiamo deciso di utilizzare il minor numero possibile di plugin ( (opens in a new tab)” rel=”noreferrer noopener” class=”rank-math-link”>leggi perché >) non ci andava giù di usare questo plugin per una cosa così semplice.

Cosa fa Elementor

Cosa ti fa fare Elementor

Un nostro collaboratore, quando gli abbiamo raccontato di questo problema, ha obiettato dicendo: “ma Elementor lo fa il menù che rimane fisso!”. Certo! Basta impostare gli “effetti di movimento”, come puoi vedere nello screenshot qui sotto, per la sezione che contiene il menù. Gli va impostato “in alto” per la proprietà “Fisso” che consente di vedere sempre il menù sovrapposto ai contenuti anche quando si scorre. Poi si può decidere, con l’impostazione “Effetti Offset” quando deve vedersi il menù fisso una volta che si scorre, nel nostro caso quando l’utente scorrerà 100 pixel della pagina.

IMPORTANTE: Questa soluzione va bene se il menù ha uno sfondo colorato sin dall'inizio perché quando si scorre la pagina risulterà sempre leggibile ma se il menù lo si vuole trasparente nella prima fase e poi con uno sfondo colorato quando si scorre allora questo non risolve.

Soluzione

Come abbiamo risolto

Come diciamo sempre ai nostri allievi dei corsi web è necessario conoscere l’HTML e il CSS per fare bene il nostro lavoro anche se ai giorni d’oggi ci sono molti automatismi e facilitazioni. In questo caso, per esempio, l’unico modo che abbiamo trovato per risolvere il problema è stato scrivere poche righe di CSS, eccole qua:

.menu-2dispari{
    position: absolute;
    width: 100%;
}

.elementor-sticky--effects {
   background-color: rgba(255, 255, 255, 0.80)!important; /* qui cambi lo sfondo, lo abbiamo messo col valore rgba perché così puoi controllare anche la trasparenza */
}

.elementor-sticky--effects .sticky-menu-items ul li a /* qui cambi il colore delle voci di menu */ {
   color: #fff!important;
}

.elementor-sticky--effects, .sticky-menu-items ul li a /* qui controlli l'effetto */ {
  transition: .5s all ease-in-out;
}

Conclusione

Conclusione

Se questo articolo ti ha aiutato condividilo così anche tu aiuti noi!