Make Last Menu Item Background Different Color That Extends And Fills The Rest Of The Space?

The menu background is full screen, but the menu itself is fixed width. Last menu item is different color.

• Link&l

Solution 1:

This can be done using a pseudo element added to the last list item:

.nav ul li.last {
  position: relative;
}

.nav ul li.last::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 1000px;
  height: 100%;
  background-color: #20bef2;
}

Here's a full working example (with overflow: hidden; added to the nav menu because the pseudo element is going to overflow - no way of determining remaining width):

.nav {
  width: 100%;
  background-color: #183650;
  overflow: hidden;
}
.nav ul {
    display: flex;
    justify-content: center;
    max-width: 500px;
    padding: 0;
    text-align: center;
    margin: 0 auto;
}
.nav ul li {
  list-style: none;
  margin: 0 10px;
}
.nav ul li a {
  color: #FFF;
  text-decoration: none;
  text-transform: uppercase;
  padding: 10px 0;
  display: block;
}
.nav ul li.last a {
  background-color: #20bef2;
}

.nav ul li.last {
  position: relative;
}

.nav ul li.last::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 1000px;
  height: 100%;
  background-color: #20bef2;
}

<div class="nav">
  <ul>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li class="last"><a href="#">Last Link</a></li>
  </ul>
</div>

Solution 2:

Of course this isn't possible if there's max-width: 500px on the parent ul. Without it, you can just give flex: 1 to the .first and li:last-child elements and adjust their text-alignments and margins. Do note that doing it with the pseudo-element is just like adding an additional element, though I don't know if your intentions are functional or pure visual:

body {margin: 0}

.nav {
  background-color: #183650;
}

.nav ul {
  display: flex;
  justify-content: center;
  /*max-width: 500px;*/
  padding: 0;
  text-align: center;
  margin: 0;
  border: 1px solid #fff;
  list-style: none;
}

.nav ul li:first-child {
  flex: 1;
  text-align: right;
}

.nav ul li:not(:last-child) {
  margin: 0 10px;
}

.nav ul li a {
  color: #FFF;
  text-decoration: none;
  text-transform: uppercase;
  padding: 10px 0;
  display: block;
}

.last {
  flex: 1;
  margin-left: 10px;
  text-align: left;
  background-color: #20bef2;
}

<div class="nav">
  <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="last"><a href="#">Last Link</a></li>
  </ul>
</div>

Share