<header class="page-header">
  <nav>
    <div class="page-header-inner">
      <a href="" class="logo">Brand</a>
      <button type="button" class="toggle-menu">MENU</button>
    </div>

    <div class="menu-wrapper">
      <ul>
        <li>
          <a href="">Item 1</a>
        </li>
        <li>
          <a href="">Item 2</a>
        </li>
        <li>
          <a href="">Item 3</a>
        </li>
      </ul>
      <div class="helper-btns">
        <button type="button" class="add-item">+</button>
        <button type="button" class="remove-item">-</button>
      </div>
    </div>
  </nav>
</header>

<article>
  <h1>Post Title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus urna arcu, bibendum non porta vel, consectetur ut mauris. Nulla facilisi. Aenean sollicitudin lobortis mi sed mollis. Duis feugiat ligula et sollicitudin sollicitudin. Curabitur ut consequat mi. Quisque porttitor euismod sapien, nec porttitor lorem bibendum sed. Proin ut porta nisi. Etiam nunc mi, pellentesque eget pretium id, accumsan laoreet quam.</p>

  <p>Integer a pellentesque tortor, ac vulputate purus. Cras sodales nisl non leo aliquam, eu eleifend felis porttitor. In viverra quam nec eros pharetra dapibus. Morbi vestibulum lorem eget pellentesque ullamcorper. Phasellus commodo orci ac tincidunt iaculis. Quisque at tortor tellus. Nullam ullamcorper leo nibh, sed tempus leo ultricies ac. Aenean lobortis accumsan rhoncus. Pellentesque nulla nisi, interdum non tincidunt sed, convallis sit amet quam. Vestibulum vitae odio lectus..</p>

  <p>Pellentesque elit enim, convallis quis nibh vel, tempus ultrices ipsum. Vestibulum aliquet molestie turpis vitae egestas. Vivamus lacinia, dui in finibus ultricies, massa felis pulvinar est, in fringilla lectus velit et ipsum. Ut blandit velit nec venenatis scelerisque..</p>

  <p>Aliquam a massa gravida, auctor erat id, pulvinar augue. Cras fringilla nulla vitae dolor malesuada dignissim. Aliquam erat volutpat. Suspendisse potenti. Mauris iaculis lacinia eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer ligula dolor, vestibulum fermentum quam eu, dignissim congue lectus. Morbi fringilla justo lorem, quis dictum dolor vehicula vitae.</p>

  <p>Pellentesque vitae lorem neque. Donec dictum, purus quis cursus pellentesque, quam lacus dignissim diam, eget tristique nunc ligula non quam. Ut sed neque est. Proin odio libero, tincidunt ac tellus at, rhoncus ullamcorper lectus. Mauris ultricies placerat odio.</p>
</article>
<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>
/* RESET STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --black: #30385d;
  --white: white;
  --beige: #fff2ee;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

button {
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
}

a {
  text-decoration: none;
  color: inherit;
}

body {
  font: 20px/28px "Ubuntu", sans-serif;
  color: var(--black);
  background: var(--beige);
}

body.overflow-y-hidden {
  overflow-y: hidden;
}


/* MAIN STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-header,
.page-header .menu-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.page-header .page-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  background: var(--beige);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.page-header .page-header-inner * {
  z-index: 1;
  font-weight: bold;
}

.page-header .logo {
  font-size: 30px;
}

.page-header button {
  font-size: 20px;
}

.page-header .menu-wrapper {
  display: none;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  background: var(--white);
}

.page-header .menu-wrapper ul {
  padding: 70px 0;
  text-align: center;
}

.page-header .menu-wrapper li + li {
  margin-top: 30px;
}

.page-header .menu-wrapper a {
  font-size: 40px;
}

.page-header .helper-btns {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}

.page-header .helper-btns button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--black);
}

.page-header.menu-opened .page-header-inner {
  box-shadow: none;
}

.page-header.menu-opened .menu-wrapper {
  display: flex;
}

article {
  max-width: 650px;
  padding: 50px 30px;
  margin: 60px auto 0;
}

article h1 {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px;
}

article p {
  font-weight: 300;
}

article p + p {
  margin-top: 30px;
}


/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 15px;
  bottom: 20px;
  display: flex;
  align-items: center;
  font-size: 1rem;
  padding: 5px;
}

.page-footer a {
  margin-left: 4px;
}
const toggleMenu = document.querySelector(".toggle-menu");
const pageHeader = document.querySelector(".page-header");
const pageHeaderMenu = document.querySelector(".page-header ul");
const addItem = document.querySelector(".add-item");
const removeItem = document.querySelector(".remove-item");
let counter = 3;

toggleMenu.addEventListener("click", function () {
  pageHeader.classList.toggle("menu-opened");
  document.body.classList.toggle("overflow-y-hidden");
});

addItem.addEventListener("click", function () {
  const li = document.createElement("li");
  const link = document.createElement("a");
  const linkText = document.createTextNode(`Item ${++counter}`);
  link.appendChild(linkText);
  li.appendChild(link);
  pageHeaderMenu.appendChild(li);
});

removeItem.addEventListener("click", function () {
  const lastChild = pageHeaderMenu.querySelector(
    "li:last-child:not(:nth-child(-n+3))"
  );
  if (lastChild) lastChild.remove();
});

External CSS

  1. https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;700&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.