Menu a scomparsa responsive - WebAwesome Template

Template Header/Menu a scomparsa

Menu visibile soltanto tramite scroll up del mouse (o rispettivo movimento su mobile). Scorri la pagina e torna un po’ su per mostrare il menu. O vai in fondo per scoprire di più

Come funziona

scroll su per mostrare il menu

Il menù è nascosto di default per dare spazio ad un menu fisso o una sezione semplice

Con un uno scroll verso l’alto il menu è visibile, verso il basso sparisce

Scrollando la pagina, i menu si attivano in base alla sezione attiva!

Per funzionare, ogni sezione deve avere il tag HTML section e come ID il link corrispondente al link del menù

Dopo averlo importato in Elementor, bisogna configurarlo

Alcuni parametri sono configurabili tramite Elementor, altri tramite HTML e CSS. Volendo, è possibile mostrare sempre il menù. I link sono da configurare tramite HTML

Personalizzalo

Queto menù funziona con Elementor Pro. È composto da un contenitore fisso in alto con all’interno altri contenitori che ospitano:

widget HTML che definisce e personalizza l’aspetto e le funzioni della navbar principale
widget logo per impostare automaticamente il logo in base al logo del sito. Può essere sostituito con testo o immagini
widget HTML per le funzioni del menù

Il colore, margini, bordi della navbar possono essere cambiati direttamente dalle impostazioni del contenitore. Per cambiare il resto, come menu, link, colore hover o attivo è sufficiente una conoscenza base di HTML e CSS.

A seguire esempi per effettuare alcune personalizzazioni

				
					 if (window.scrollY > 300)

[codice NAVBAR] Aumenta o diminuisci il valore per decidere dopo quanti pixel far apparire il menù

				
					<nav class="navbar">
		<div class="navbar-toggle">
			<span></span>
			<span></span>
			<span></span>
		</div>
		<ul class="navbar-nav">
			<li><a href="#Link1">Link1</a></li>
			<li><a href="#Link2">Link2</a></li>
			<li><a href="#Link3">Link3</a></li>
		</ul>
	</nav>

[codice MENU] Scegli i link delle sezioni nella tua pagina. Link1, Link2, etc sono i link mostrati nel menu, mentre #link1 è il link che manda alla sezione che ha lo stesso nome in CSS ID

				
					.navbar-nav {
    right:-100%;
    opacity: 0;
    padding:0;
    position: fixed;
    top: 50px;
    width: 0%;
    height: 0vh;
    background-color: #333333F5;
    z-index: 1;
    overflow-y: none;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.5s ease-in-out;
    flex-direction: column;
    justify-content: center;
}

.navbar-nav.active {
    right:0;
    height: 80vh;
    opacity: 1;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    transition: all 0.5s ease-in-out;
}

[codice MENU] Questa sezione definisce il menu a comparsa sui dispositivi mobile. Personalizzala come vuoi!

				
					.mostra {
    display: flex!important;
    z-index: 999;
}
.nascondi {
    display: none;
}

[codice NAVBAR] Puoi scegliere di mostrare sempre il menu rimuovendo la classe nascondi dalla sezione o dal custom CSS

Questo template è un header, dunque può essere impostato per tutto il sito o per alcune pagine tramite le condizioni di Elementor. Il menu attivo però non funziona per pagine.

Tramite HTML e CSS è possibile aggiungere bottoni e altro