menu - actieve link probleem

Net toen ik dacht dat ik css begon te begrijpen doet zich het volgende voor.

Ik probeer in een menu de actieve link een onderrand te geven in een andere kleur. (Configuratie is Drupal 8 met Adaptive Theme)

De situatie is zoals hieronder. (.magister is de override-klasse van het menu)

Het komische is dat de rand zich perfect toont in a:hover en a:focus.
Bij a:active of a.active is er geen beweging in te krijgen. De rand blijft onzichtbaar.

Weet iemand in welke richting ik met zoeken?

#navbar .magister ul li a {
color: #555555;
}

#navbar .magister ul li a:hover, #navbar .magister ul li a:focus {
color: #A53692;
}

#navbar .magister ul li a {
text-decoration: none;
padding: 0;
margin-left: 40px;
line-height: 66px;
display: inline-block;
border-bottom: 2px solid #ffffff;
}

#navbar .magister ul li a:hover, #navbar .magister ul li a:focus {
text-decoration: none;
padding: 0;
margin-left: 40px;
line-height: 66px;
border-bottom: 2px solid #A53692;
}

#navbar .magister ul li a:active {
border-bottom: 2px solid #A53692;
}

Auteur: 
ludoxx
Door bramvandenbulcke op 31 januari, 2017 - 12:47

Probeer eens een !important toe te voegen. Gewoon om te kijken of dat werkt.

Verder kan je ook de DOM (Inspect Element) actief gebruiken tot je het probleem gevonden hebt: je kan daar eigenschappen uitzetten en eigenschappen toevoegen.

***
http://bram.io
http://webwerk.be

afbeelding van belba
Door belba op 8 februari, 2017 - 17:20

De border bottom geef je 3 keer weer in dezelfde kleur, dan is er bij de actie geen effect. De a:active wordt ook maar zeer kort weergegeven (enkel de tijd dat je op de link klikt) en nog weinig gebruikt bij het stylen. Je kan een a:visited in een andere kleur instellen om duidelijk te maken dat de link bezocht is. Als je toch een actie wil tijdens het klikken, kies dan voor een andere kleur.

Bookmark and Share

Drupal is een geregistreerd merk van Dries Buytaert. | Powered by Pantheon.

Drupal.be/Drupal.nl is de website van de Nederlandstalige Drupalgemeenschap.

onomatopee