Home Background color for active item in flexbox only affecting text, desired behavior is entire space-around

Questions

Background color for active item in flexbox only affecting text, desired behavior is entire space-around

May 8, 2024

After creating a div with the class of .navbar and implementing it via display: flex; for each page I am on, I want the active one in the navbar to have its entire background to have a different color. Right now, it is only affecting the text.

Desired behavior was achieved via a different implementation of navbar, but it caused different issues.

Current Behavior

Desired Behavior

.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>

I first attempted this via a tag, but for some reason it led to the far left/home item of the bar to only be partially colored in its background. This only occurred at the Home selection:

Nav Issue

>Solution :

The issue is that there is no flex (shorthand for: grow, shrink, and basis) value assigned to each div within the .navbar. So the div is only as wide as it needs to be to fit the content within. Defaults for those properties are 0, 1 and auto.

You can remove the justify-content: space-around;, and add this rule:

.navbar > div {
  flex: 1; /* or flex-grow: 1 */
  text-align: center
}

Setting the property flex: 1 for each div essentially says, grow this element at the same ratio as all other elements within this parent (.navbar), the width of each element will fill the space, while taking into consideration the other sibling elements (div).

.navbar {
  background-color: #0066b1;
  display: flex;
  flex-wrap: wrap;
}

.navbar a {
  color: #fff773;
  text-decoration: none;
}

.navbar > div {
  flex: 1;
  text-align: center
}

.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>