[RISOLTO] a:active non funziona nel footer

[mariarosaria]

Salve a tutti.
Queste sono tutte le modifiche riguardanti il footer nel mio custom.css

Codice: [Seleziona]

/* Cambio il colore dei link nel bottom e nel footer*/
#sp-footer a, #sp-bottom a {
  color: #fff;
  text-decoration: underline;
}
#sp-footer a:hover, #sp-bottom a:hover, #sp-footer a:active, #sp-bottom a:active, #sp-footer a:focus, #sp-bottom a:focus {
  color: #85cdff;
  text-decoration: none;
}
/* Fine */


/* Modifico colore footer */
#sp-footer, #sp-bottom {
  background: #144ca2;
  color: #fff;
}

#sp-footer {
  font-size: 14px;
  padding: 0;
  font-variant: small-caps;
  font-family: 'Architects Daughter', sans-serif;
  font-weight: 500;
}
@media only screen and (max-width:680px) {
  #sp-footer {
  text-align:center;
  padding-bottom: 50px;
  }
}
#sp-footer h3 {
  font-size: 15px;
  margin-top:15px;
}
#sp-footer .container-inner {
  padding: 30px 0;
  border-top: 1px solid;
}
/* Fine */

/* Modifiche footer. Inserisco linee verticali tra le voci del footer menu. Inline-block mi allinea voci e lineette*/

#sp-footer ul.menu {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media only screen and (max-width: 680px) {
  #sp-footer ul.menu {
  display:list-item;
  line-height: 1.5;
  padding-top:10px;
  text-align: center;
}
}
#sp-footer ul.menu li {
  display: inline;
  margin: 0 7px;
}
#sp-footer ul.menu li a {
  display: inline-block;
}
@media only screen and (max-width: 680px) {
  #sp-footer ul.menu li a {
  display:list-item;
  line-height: 0;
  margin:-5px;
  text-align: center;
}
}
#sp-footer ul.menu>:before {
 content:"";
 display:inline-block;
 height:10px;
}
@media only screen and (max-width: 768px) {
  #sp-footer ul.menu>:before {
  display:none;
}
}
#sp-footer ul.menu>:nth-child(n+2):before {
 margin-right:12px;
 border-left:1px solid #fff
}
/* Fine */

/* Classi personalizzate per le voci del footer menu perchè non vengono visualizzate le icone font awesome da opzioni megamenu */
#sp-footer ul.menu li a.homefooter:before {
 content:"\f015";
 display:inline-block;
 margin-right: 5px;
 font: normal normal normal 14px/1 FontAwesome;
 font-size: inherit;
text-rendering: auto;
}
#sp-footer ul.menu li a.sitemapfooter:before {
 content:"\f0e8";
 margin-right: 5px;
 display: inline-block;
 font: normal normal normal 14px/1 FontAwesome;
 font-size: inherit;
text-rendering: auto;
}
#sp-footer ul.menu li a.cookiefooter:before {
 content:"\f21b";
 margin-right: 5px;
 display: inline-block;
 font: normal normal normal 14px/1 FontAwesome;
 font-size: inherit;
text-rendering: auto;
}
/* Fine */
Se visitate le pagine dei link del footer l'attributo :active sembra non funzionare.

Poichè ho fatto le modifiche in diversi momenti e forse c'è un po' di disordine nella successione delle dichiarazioni, non so se c'è qualche "precedenza" sbagliata, anche se l'attributo :active, oltre che ad essere prima di tutti gli altri, è assegnato al link "a".

Non so se le dichiarazioni successive "ul li a" sballano qualcosa.

Ho provato anche con !important

Qualcuno darebbe un'occhiata?

www.cittadelladellimmacolata.it

Grazie

[Limma]

Prova ad aggiungere questa regola alla sezione "Cambio il colore dei link nel bottom e nel footer" del tuo custom.css:

Codice: [Seleziona]

#sp-footer li.active > a {
  color: #85cdff;
  text-decoration: none;
}

[mariarosaria]

Grandioso!
Funziona.
Metto già risolto al topic, ma ho un dubbio... Nel custom andrebbe messo un po' di "ordine"?
Ho fatto le modifiche un po' per volta e gli attributi delle varie sezioni sono mescolati.
Grazie

[Limma]

 
Va da sè che un po' di ordine fa sempre bene... Ma per mettere ordine, sempre che ce ne sia bisogno, c'è da studiare con una certa attenzione il tuo css e per farlo ci vuole tempo.
In ogni caso, se ispezioni il tuo sito con i soliti tool (cosa che credo tu faccia già) potresti già vedere se ci sono regole che si sovrappongono e che vengono sovrascritte da altre regole css.

Ma ora ho io una domanda da farti, anzi due:
stai usando il page builder di JoomShaper?
'sto benedetto menu nel footer è un modulo menu o lo hai fatto a mano (intendo modulo personalizzato)?

[mariarosaria]

Proverò a mettere in ordine almeno raggruppando le modifiche per posizione. Mi sono bloccata un po' perchè ho notato che le regole @media se non sono al posto giusto non funzionano e non volevo spostare troppo le cose dato che adesso funziona tutto abbastanza bene.

Layout builder lo sto usando e non lo sto usando. Nel senso che per adesso sto sfruttando le posizioni già esistenti da template predefinito. (anche perchè a parte l'header e il footer non ho fatto grosse modifiche)

Il footer menu l'ho fatto con un modulo personalizzato pubblicato nella posizione footer2 stabilita con layout builder.
Perchè, c'è un'altra soluzione?

Non saprei fare altrimenti con layout builder con cui ci sto un po' sbattendo la testa (su "navigation" posso lavorare soltanto su mega menu e off-canvas), non ho capito bene alcuni meccanismi.

Motivo per cui per far visualizzare le icone di font awesome nel footer menu ho dovuto aggirare il problema con una classe alternativa (da menu a tendina in "mega menu" nelle opzioni della voce di menu non funzionano).

Tra l'altro non sono ancora riuscita a capire dove sono tutte quelle posizioni già esistenti e come modificarne l'ordine (position2, 3, 4...).

Perchè?