[RISOLTO] Menu fisso durante lo scroll.

Luca

Buongiorno,
ho una versione di Joomla 3.8.3 ed utilizzo il template Protostar.
Ho installato un menu principale in alto e vorrei in modo che resta fisso durante lo scroll.
Ora come giusto che sia, segue la pagina e sparisce.
Ho trovato un link che spiega come fissarlo in alto, purtroppo è vecchio e non si apre.
Qualcuno può dirmi come fare?
Grazie.

jabba

Ciao, in generale per far scrollare elementi assieme alla pagina si usa position: sticky via CSS. Se metti il link al sito possiamo vedere se e come si può usare questa regola. Ciao!

Luca

@jabba ha detto in Menu fisso durante lo scroll.:

Ciao, in generale per far scrollare elementi assieme alla pagina si usa position: sticky via CSS. Se metti il link al sito possiamo vedere se e come si può usare questa regola. Ciao!

Grazie!
Il link è: https://www.ugonespoli.com

luX0r75

@Luca ha detto in Menu fisso durante lo scroll.:

@jabba ha detto in Menu fisso durante lo scroll.:

Ciao, in generale per far scrollare elementi assieme alla pagina si usa position: sticky via CSS. Se metti il link al sito possiamo vedere se e come si può usare questa regola. Ciao!

Grazie!
Il link è: https://www.ugonespoli.com

Abilita il tasto destro sulle pagine. Diventa difficile aiutarti se non si possono ispezionare gli elementi.

luX0r75

Come ti ha suggerito @jabba , devi usare la sticky position.
Per il tuo sito, dovresti risolvere aggiungendo queste righe al CSS per la classe .navigation

z-index: 1000 !important;
position: sticky;
top: -5px;
background-color: #fff;

Facci sapere.

Luca

@luX0r75 ha detto in Menu fisso durante lo scroll.:

@Luca ha detto in Menu fisso durante lo scroll.:

@jabba ha detto in Menu fisso durante lo scroll.:

Ciao, in generale per far scrollare elementi assieme alla pagina si usa position: sticky via CSS. Se metti il link al sito possiamo vedere se e come si può usare questa regola. Ciao!

Grazie!
Il link è: https://www.ugonespoli.com

Abilita il tasto destro sulle pagine. Diventa difficile aiutarti se non si possono ispezionare gli elementi.

Sto cercando di ricordare come ho fatto a disabilitarlo!!!! Come riesco lo sblocco e scrivo nuovamente

Luca

@luX0r75 ha detto in Menu fisso durante lo scroll.:

Come ti ha suggerito @jabba , devi usare la sticky position.
Per il tuo sito, dovresti risolvere aggiungendo queste righe al CSS per la classe .navigation
z-index: 1000 !important;
position: sticky;
top: -5px;
background-color: #fff;
Facci sapere.

Ho provato ma non va.
Cmq per il menu ho usato il componente SWmenuFree che ha un suo CSS editabile che penso si vada ad integrare. Non so se devo operare lì.

luX0r75

L'ho provato direttamente sulla pagina, va sicuramente
Se non va è per un problema di cache (browser o Joomla) o perché non hai scritto correttamente lo stile.
Devi aggiungere le righe che ho scritto alla classe:

.navigation {
	padding: 5px 0;
	border-top: 1px solid rgba(0,0,0,0.075);
	border-bottom: 1px solid rgba(0,0,0,0.075);
	margin-bottom: 10px;
}

che trovi nel file templates/protostar/css/template.css

luX0r75

Alla fine delle modifiche dovresti avere questa classe .navigation nel file templates/protostar/css/template.css

.navigation {
	padding: 5px 0;
	border-top: 1px solid rgba(0,0,0,0.075);
	border-bottom: 1px solid rgba(0,0,0,0.075);
	margin-bottom: 10px;
	z-index: 1000 !important;
	position: sticky;
	top: -5px;
	background-color: #fff;
}

kippo

@Luca ha detto in Menu fisso durante lo scroll.:

Sto cercando di ricordare come ho fatto a disabilitarlo!!!! Come riesco lo sblocco e scrivo nuovamente

dovrebbe essere un pezzeto di codice js
ciao

Luca

@luX0r75
funziona!!! Grazie.
Avevi ragione, ho dovuto cancellare la cache.
E' che quando modifico gli articoli non ce n'è bisogno, però a pensarci succede anche con le immagini.
Ti ringrazio ancora.

Luca

@kippo
Risolto....resterà un mistero (per me) dove sia finito quel codice hahahah ma meglio così, importante è che va. Grazie anche a te. Ciao

luX0r75

@Luca Fosse per me, il caching non avrebbe mai visto la luce! Ciao

jabba

@luX0r75 ha detto in Menu fisso durante lo scroll.:

@Luca Fosse per me, il caching non avrebbe mai visto la luce! Ciao

Amen!

Luca

Dai alla fine ha la sua utilità: serve a capire quanto un sito è fatto male!!! Ho cancellato la cache pure sul telefonino...ed è una lumaca!!!! Mi toccherà intervenire pure su questo

pietro strada

sono entrato nel sito ma non sembra poi così malvagio come tempi di risposta. Come grafica è un po' datato. e ci sta, vista la versione.
Non è ora e tempo di migrarlo a un joomla più recente?

Luca

@pstrada ha detto in Menu fisso durante lo scroll.:

sono entrato nel sito ma non sembra poi così malvagio come tempi di risposta. Come grafica è un po' datato. e ci sta, vista la versione.
Non è ora e tempo di migrarlo a un joomla più recente?

Grazie Pietro. E' che ho usato diversi componenti, a partire dal menù a finire con le estensioni per gli effetti sulle immagini....ed ho paura che poi esca fuori un problema di compatibilità. Sono sempre restio agli aggiornamenti.

Cmq purtroppo ho visto che c'è un piccolo problema con il menù fisso: ho una pagina dove ho messo un indice, per cui ho usato le ancore. Quando clicco, la pagina si posiziona bene, ma le prime righe spariscono perchè finiscono sotto al menù che ora è fisso. Penso non si possa fare nulla, a meno che non metto l'ancora più su rispetto il reale punto.

pietro strada

puoi sempre clonarlo, metterlo su un ambiente di test e vedere quale componente/plugin da problemi. Migrare è sempre un bell'esercizio

Luca

@pstrada ha detto in [RISOLTO] Menu fisso durante lo scroll.:

puoi sempre clonarlo, metterlo su un ambiente di test e vedere quale componente/plugin da problemi. Migrare è sempre un bell'esercizio

E' una buona idea....ma come si fa a clonarlo?

luX0r75

@Luca Eh sì, sticky e ancore non vanno d'accordo.

Usa le proprietà scroll-padding-top o scroll-margin-top per evitare che il menu vada a finire sull'ancora.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-padding-top
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-margin-top