<div id="wrap">
  <nav>
    <img class="logo" src="https://docs.theforeman.org/index_assets/foremanhelmet.svg" />
    <button type="button" class="btn-hamburger" data-action="nav-toggle">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </button>
    <ul class="nav-menu">
      <li class="nav-item"><a href="#">Home</a></li>
      </li>
      <li class="nav-item dropdown">
        <a href="#" data-action="dropdown-toggle">Foreman Stable (3.1)</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Guide 1</a>
          <a class="dropdown-item" href="#">Guide 2</a>
          <a class="dropdown-item" href="#">Guide 3</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a href="#" data-action="dropdown-toggle">Foreman 3.0</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Guide 1</a>
          <a class="dropdown-item" href="#">Guide 2</a>
          <a class="dropdown-item" href="#">Guide 3</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a href="#" data-action="dropdown-toggle">Nightly</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Guide 1</a>
          <a class="dropdown-item" href="#">Guide 2</a>
          <a class="dropdown-item" href="#">Guide 3</a>
        </div>
      </li>
    </ul>
  </nav>
  <div class="container">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, omnis nemo reiciendis porro amet est sed ad eligendi possimus ex voluptate, numquam quam fugit hic ratione quod dolor optio enim.
      Laudantium explicabo tempore temporibus officia ipsum unde odio neque! Voluptates culpa dolor explicabo in velit pariatur officiis, ipsa hic voluptas blanditiis doloribus reiciendis soluta beatae corrupti deleniti. Officia, maiores ipsa?
      Omnis, architecto aut neque ipsum et rem eaque. Ad et tenetur, maxime sequi nobis quisquam possimus doloremque vitae, quis at reiciendis nihil magni voluptas suscipit repudiandae, molestias enim expedita. Quidem!
      Quae consectetur aliquam qui officiis nesciunt voluptate quis magni eligendi ut expedita. Similique soluta beatae doloremque dolor distinctio modi minus eius iure corporis. Nam temporibus molestias commodi quae. Veniam, sapiente!
      Unde repudiandae, debitis quas impedit dignissimos, saepe nobis optio expedita doloribus fugit perspiciatis nemo? Vel esse iure quia perspiciatis quis asperiores quo labore consectetur quos deserunt. Architecto cum nulla eius!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur omnis quo nesciunt! Pariatur veritatis, ut rem, non autem omnis ab in esse tempore dolorem enim? Eligendi libero numquam voluptates labore!
      Fugit magni atque reprehenderit aspernatur, alias placeat distinctio illo dolor optio animi nihil, doloremque ex nulla ipsam exercitationem eius dolorum deserunt officiis provident debitis tenetur enim et voluptatum. Vel, accusamus.
      Modi, praesentium eveniet minima pariatur at nihil quam ad ullam iure aut iusto sint inventore dolor. Voluptatibus porro sint nulla, id, dolores quisquam accusamus quae eveniet aliquam assumenda modi esse?
      Asperiores inventore eum praesentium officiis impedit optio! Quia a odio laudantium quae similique. Earum autem modi esse eius voluptates quis accusantium expedita sunt consequuntur molestias. Ipsum omnis itaque natus minus?
      Nisi hic illo magni itaque quos reiciendis numquam dicta neque dolor. Quis voluptates nulla facere sed quas tempora dolorem? Dolorum est eaque eius porro corporis eum soluta reiciendis. Itaque, nemo?
    </p>
  </div>
</div>

body {
  padding: 0;
  margin: 0;
}
.container {
  position: relative;
  z-index: 1;
  margin-top: 70px;
  padding: 5%;
  min-height: 100%;
}
.container p {
  font-family: sans-serif;
  font-size: 1.2em;
}
nav {
  position: fixed;
  z-index: 9999;
  left: 0;
  right: 0;
  top: 0;
  height: 70px;
  padding: 0 1.5em;
  background-color: #025d8c;
  font-family: sans-serif;
  line-height: 70px;
}
nav .logo {
  width: 50px;
  vertical-align: middle;
}
nav .nav-menu {
  position: absolute;
  right: 1.5em;
  top: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}
nav .nav-item {
  display: inline-block;
}
nav .nav-item > a {
  display: inline-block;
  padding: 0 1.5em;
  line-height: 70px;
  color: #fff;
  text-decoration: none;
}
nav .dropdown {
  position: relative;
}
nav .dropdown a::after {
  content: "";
  display: inline-block;
  margin-left: 0.5em;
  vertical-align: middle;
  border-top: 0.3em solid #fff;
  border-right: 0.3em solid transparent;
  border-left: 0.3em solid transparent;
}
nav .dropdown.show a::after {
  transform: rotate(180deg);
}
nav .dropdown-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: 0.5em 0;
  margin-top: -0.5em;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 0.5em;
  background-color: #fff;
}
nav .dropdown.show .dropdown-menu {
  display: block;
}
nav .dropdown-item {
  display: block;
  padding: 0 1.5em;
  font-size: 0.875em;
  color: #000;
  line-height: 3;
  text-decoration: none;
}
nav .btn-hamburger {
  display: none;
  position: absolute;
  right: 1.5em;
  top: 50%;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  outline: none;
  transform: translateY(-50%);
}
nav .btn-hamburger span {
  display: block;
  width: 30px;
  height: 4px;
  background-color: #fff;
  margin: 6px;
  border-radius: 2px;
  transition: 0.3s ease-in-out;
}
nav .btn-hamburger span:nth-child(4),
nav .btn-hamburger span:nth-child(5) {
  position: absolute;
  top: 10px;
  opacity: 0.5;
}
nav .btn-hamburger span:nth-child(4) {
  transform: rotate(45deg) scale(0);
}
nav .btn-hamburger span:nth-child(5) {
  transform: rotate(-45deg) scale(0);
}
nav.opened .btn-hamburger span:nth-child(4) {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
nav.opened .btn-hamburger span:nth-child(5) {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}
nav.opened .btn-hamburger span:nth-child(1),
nav.opened .btn-hamburger span:nth-child(2),
nav.opened .btn-hamburger span:nth-child(3) {
  opacity: 0;
}
@media screen and (max-width: 768px) {
  nav .nav-menu {
    position: fixed;
    left: 0;
    right: 0;
    top: 70px;
    bottom: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    background-color: #363d4e;
    transition: bottom 0.5s ease-in-out;
    overflow: hidden;
  }
  nav.opened .nav-menu {
    bottom: 0;
  }
  nav .nav-item > a {
    display: block;
  }
  nav .dropdown-menu {
    position: relative;
    top: 0;
    margin: 0 1.5em;
  }
  nav .btn-hamburger {
    display: block;
  }
}

let nav = document.querySelector("nav");
let dropdown = nav.querySelector(".dropdown");
let dropdownToggle = nav.querySelector("[data-action='dropdown-toggle']");
let navToggle = nav.querySelector("[data-action='nav-toggle']");

dropdownToggle.addEventListener("click", () => {
  if (dropdown.classList.contains("show")) {
    dropdown.classList.remove("show");
  } else {
    dropdown.classList.add("show");
  }
});

navToggle.addEventListener("click", () => {
  if (nav.classList.contains("opened")) {
    nav.classList.remove("opened");
  } else {
    nav.classList.add("opened");
  }
});

var menu = JSON.parse(`
{
  "menu": {
    "Foreman Stable (3.1)": {
      "Planning for Foreman": "#",
      "Foreman Quickstart Guide on RHEL/CentOS
": "#",
      "Foreman Quickstart Guide on Debian/Ubuntu": "#",
      "Installing Foreman on RHEL/CentOS": "#",
      "Installing Smart Proxy with Content on RHEL/CentOS
": "#",
      "Installing Smart Proxy on RHEL/CentOS": "#",
      "Installing Foreman on Debian/Ubuntu": "#",
      "Installing Smart Proxy on Debian/Ubuntu": "#",
      "Upgrading and Updating Foreman": "#",
      "Deploying Foreman on AWS": "#",
      "Configuring Smart Proxies with a Load Balancer": "#",
      "Provisioning Guide": "#",
      "Configuring Foreman to use Ansible": "#",
      "Managing Hosts Guide": "#",
      "Administering Foreman": "#",
      "Application Centric Deployment": "#"
    },
    "Katello Stable (4.0)": {
      "Katello Quickstart Guide on RHEL/CentOS
": "#",
      "Installing Katello on RHEL/CentOS": "#",
      "Upgrading and Updating Katello": "#",
      "Content Management Guide": "#"
    }
  }
}
`);