In questo testo vedrai come creare un menu di navigazione nello stile di un'applicazione, ovvero con lo stesso aspetto e forma utilizzati da varie applicazioni mobili o ad es. come Instagram che utilizza. Creeremo tale menu sulla versione reattiva del sito per dispositivi mobili con l'aiuto di Elementor.

Menu di navigazione

La prima cosa da fare è aggiungere una sezione semplice. Successivamente, aggiungi un titolo e un'icona sopra il titolo e centralizzali. Affinché abbia una buona resa sui dispositivi mobili, previa sperimentazione, è necessario impostare la dimensione dell'icona su 25 e il titolo su 11, in particolare in questo caso, e a seconda del tema, cambiare il colore per adattarlo il resto del sito. Successivamente, regola la distanza tra l'icona e il testo in modo che non sia troppo grande, cioè nella sezione sotto l'opzione Spazio widget (px) è necessario impostare 0 nel codice opzione Larghezza colonna (%) imposta 20, se avrai 5 voci di menu.

Successivamente, puoi copiare la sezione 5 volte o quante volte desideri e poi modificare semplicemente le icone e il testo sotto l'icona a seconda del menu. Puoi scegliere le icone dalla libreria o aggiungerne di tue, sentiti libero di giocarci e il menu dovrebbe assomigliare a questo a questo punto.

E lì hai creato un menu di navigazione simile alle applicazioni, ora devi solo rilasciarlo in fondo al sito e fissarlo in quel punto in modo che non si muova. Se desideri fissare il menu nella parte superiore della pagina e vederlo sempre mentre scorri la pagina, devi procedere come segue. Quando si imposta la sezione, accendere l'interruttore Effetti di scorrimento e il codice dell'opzione Appiccicoso lascialo attivo solo per i dispositivi mobili, se questo è il tuo obiettivo.

Per sistemare il menu di navigazione nella parte inferiore del sito non puoi farlo in questo modo, ma nel modo seguente. Devi aggiungere le 2 righe di codice nella sezione CSS personalizzato che vedrai nell'immagine qui sotto, e prima di farlo devi aumentare lo Z-index fino a 10, in modo che il tuo menu non scompaia. Inoltre, è necessario espandere la sezione in modo che il menu occupi l'intera larghezza della pagina, e ciò si ottiene attivando l'interruttore nell'opzione Disposizione chiamato Sezione elastica. Come vedrai nell'immagine qui sotto, il menu si è spostato in fondo alla pagina.

Spero che questo testo ti sia stato utile e che tu abbia imparato qualcosa di nuovo, se sei interessato a leggere altri consigli per il lavoro indipendente puoi verificarli sul nostro blog, e nel caso in cui desideri consultare professionisti, clicca su questo Collegamento.

Fonte: Youtube