<body>
  <header>
    <div id="co-name">
      ABCD Design Co.
    </div>
    <nav>
      <ul id="nav-list">
        <li>Services</li>
        <li class="" id="item-b">Work</li>
        <li id="item-c">About</li>
        <li>Contact</li>
      </ul>
    </nav>
  </header>
  <div id="button-container">
    <button id="buttonEmpty" onclick="empty()">Empty the third Nav Item</button>
  </div>
</body>
body,
button {
  font-family: "Roboto", sans-serif;
}

header {
  padding: 1ch 2ch;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(270deg, #16407a, #0f7543);
  color: white;
}
#co-name {
  font-size: 1.3rem;
}

ul {
  display: flex;
  gap: 2ch;
  font-family: "Merriweather", serif;
  & li {
    display: inline-block;
  }
}

li:empty {
  display: none;
}

#button-container {
  padding: 2ch;
  display: flex;
  justify-content: center;
  & button {
    padding: 1.5ch;
    background: none;
    border: 0.5ch solid #16407a;
    border-radius: 1ch;
    background: transparent;
    box-shadow: 3px 3px #e8eaf6;
    font-weight: bold;
    cursor: pointer;
    transform: 2s ease;
    &:active {
      position: relative;
      left: 3px;
      top: 3px;
      box-shadow: none;
      text-shadow: none;
    }
  }
}
View Compiled 
const itemC = document.getElementById("item-c");
const emptyButton = document.getElementById("buttonEmpty");

function empty() {
  if (itemC.textContent == "") {
    itemC.textContent = "About";
    emptyButton.textContent = "Empty the third Nav Item";
    console.log(itemC);
  } else {
    itemC.textContent = "";
    emptyButton.textContent = "Insert the third Nav Item";
    console.log(itemC);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.