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:

.navulli.last {
  position: relative;
}

.navulli.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;
}
.navul {
    display: flex;
    justify-content: center;
    max-width: 500px;
    padding: 0;
    text-align: center;
    margin: 0 auto;
}
.navulli {
  list-style: none;
  margin: 010px;
}
.navullia {
  color: #FFF;
  text-decoration: none;
  text-transform: uppercase;
  padding: 10px0;
  display: block;
}
.navulli.lasta {
  background-color: #20bef2;
}

.navulli.last {
  position: relative;
}

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

<divclass="nav"><ul><li><ahref="#">Link</a></li><li><ahref="#">Link</a></li><li><ahref="#">Link</a></li><li><ahref="#">Link</a></li><li><ahref="#">Link</a></li><li><ahref="#">Link</a></li><liclass="last"><ahref="#">Last Link</a></li></ul></div>

Solution 2:

Of course this isn't possible if there's max-width: 500px on the parentul. 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;
}

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

.navulli:first-child {
  flex: 1;
  text-align: right;
}

.navulli:not(:last-child) {
  margin: 010px;
}

.navullia {
  color: #FFF;
  text-decoration: none;
  text-transform: uppercase;
  padding: 10px0;
  display: block;
}

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

<divclass="nav"><ul><li><ahref="#">Link</a></li><li><ahref="#">Link</a></li><li><ahref="#">Link</a></li><li><ahref="#">Link</a></li><li><ahref="#">Link</a></li><li><ahref="#">Link</a></li><liclass="last"><ahref="#">Last Link</a></li></ul></div>

Share