Depois de criar um div
com a classe de .navbar
e implementá-lo display: flex;
para cada página em que estou, quero que o ativo na barra de navegação tenha todo o seu plano de fundo com uma cor diferente. No momento, isso está afetando apenas o texto.
O comportamento desejado foi alcançado por meio de uma implementação diferente da barra de navegação, mas causou problemas diferentes.
.navbar {
background-color: #0066b1;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.navbar a {
color: #fff773;
text-decoration: none;
}
.navbar div.active {
background-color: #233440;
}
<div class="navbar">
<div class="active"><a href="HomePage.html">Home</a></div>
<div><a href="LorePage.html">Lore</a></div>
<div><a href="CharacterCreator.html">Character Creator</a></div>
<div><a href="Roster.html">Roster</a></div>
</div>
Tentei fazer isso pela primeira vez por meio de uma tag, mas por algum motivo isso fez com que o item mais à esquerda/inicial da barra ficasse apenas parcialmente colorido em seu plano de fundo. Isso só ocorreu na seleção Home: