Hey, i have got some custom html and css code on my website to make a custom menu. I would like to style the active style of the links properly but it does not seem to work with :active{}.
is there a chance to get this running with pure css and html?
this is the line that does not seem to do anything (it is at the end of my custom css):
.nav-link a:active{
color: hsla(0, 0%, 100%, 1);
}
this is my website and below that you will find my custom code:
https://andrebeiler.work (the menu is custom made)
Custom HTML at top:
<div class="top">
<a href="/" class="link-3">André Beiler</a>
<div class="nav-2">
<a href="/foto" class="nav-link">Fotographie</a><span class="komma">, </span>
<a href="/film" class="nav-link">Musikvideo</a><span class="komma">, </span>
<a href="#" class="nav-link">Archiv</a><span class="komma">, </span>
<a href="/snaps" class="nav-link">Snaps</a><span class="komma">, </span>
<a href="/about" class="nav-link">Über Mich</a><span class="komma">, </span>
<a href="/about" class="nav-link">Kontakt</a>
</div>
</div>
Custom CSS:.top {
font-family: 'NeueHaasDisplayRoman', sans-serif;
position: fixed;
left: 0%;
top: 0%;
right: 0%;
bottom: auto;
width: 100%;
padding-top: 20px;
padding-bottom: 0px;
padding-left: 20px;
z-index: 999999999;
}
.link-3 {
text-decoration: none;
font-size: 1em; /* Set the font size to 1em /
line-height: 0.95;
color: hsla(0, 0%, 100%, 0.6);
transition: color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); / Use "in out circ" timing function for color */
}
.link-3:hover {
color: hsla(0, 0%, 100%, 1);
}
.nav-2 {
display: flex;
margin-top: 2px;
}
.nav-link,
.komma {
font-size: 1.3em; /* Set the font size to 1.3em /
line-height: 0.95;
text-decoration: none;
color: hsla(0, 0%, 100%, 0.6);
transition: color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); / Use "in out circ" timing function for color */
}
.nav-link:hover {
color: hsla(0, 0%, 100%, 1);
}
.komma {
margin-right: 4px; /* Adjust the margin as needed */
}
.lay-projectindex-row.hover{
font-family: 'NeueHaasDisplayRoman', sans-serif;
}
.nav-link a:active{
color: hsla(0, 0%, 100%, 1);
}