Navbar Beginner here As you can see everything is working perfectly until you click on the space between the links you can check here- my codepen. when I click on the links navbar it perfectly shows the active class, but if I click in between the space the whole navbar loses the class.
var element = document.getElementsByClassName("flex-nav")[0];
element.addEventListener("click", myFunction);
function myFunction(e) {
var elems = document.querySelector(".active");
if(elems !==null) {
elems.classList.remove("active");
}
e.target.className = "active";
}.flex-nav {
display: flex;
flex-direction: column;
margin-top: 54px;
background: #333;
width: 75px;
height: 657px;
justify-content: space-around;
align-items: stretch;
line-height: 23px;
}
.flex-nav a{
text-decoration: none;
color: white;
flex-wrap: wrap;
text-align: center;
margin: 5px;
border: 1px solid transparent;
}
.flex-nav a.active {
background: #9999ff;
}
.flex-nav a:hover:not(.active) {
background: #555;
border: 1px solid rgba(255, 51, 153,1);
} <div class="flex-nav">
<a href="#" style="order:3">2k</a>
<a href="#" style="order:2">4k</a>
<a href="#" style="order:4">1080p</a>
<a href="#" style="order:1">8k</a>
</div>You can avoid that behaviour by letting the flex items grow so that there is no space between them: Add these settings to .flex-nav a
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
(The first is for the growing, the others are for centering the text inside them)