navbar.scss

/* Inspired by https://codepen.io/andornagy/pen/RNeydj */

/* Reset list defaults */
nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

/* Display top-nav elements inline */
nav > ul > li {
  display: inline-block;
}

/* Style for top-nav elements. */
nav label {
  padding: 14px 20px;
  font-size: 0.9em;
  display: block;
  cursor: default;
  text-decoration: none;
}

/* Style for sub-nav elements. */
nav a {
  padding: 14px 20px;
  font-size: 0.9em;
  display: block;
  cursor: pointer;
  text-decoration: none;
}

/* Style for top-nav elements. */
nav label, nav > ul > li > a {
  color: white;
  text-shadow: none;
}

/* Style for sub-nav elements. */
nav a {
  color: black;
  img {
    vertical-align: middle;
    height: 18px;
    margin-left: 5px;
  }
}

/* Behavior of top-nav elements when cursor hovers over them. */
nav label:hover {
  text-decoration: none;
  background-color: #d2e1dd;
  color: black;
}

/* Behavior of sub-nav elements when cursor hovers over them. */
nav a:hover {
  text-decoration: underline;
  background-color: #d2e1dd;
  color: black;
}

/* Sub-nav (dropdowns) styles, hidden per default ... */
nav ul ul {
  display: none;
  position: absolute;
  background-color: #d2e1dd;
  z-index: 1;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-top: 1px solid #111;
}

/* ... but show as on hover. */
nav ul li:hover ul {
  display: inherit;
}

/* Checkboxes toggle the visibility of sub-navs on small screens,
they are checked and un-checked using the respective labels. */
nav input[type='checkbox'] {
  display: none;
}

@media only screen and (max-width: 768px){
  /* Top-nav items on small screens are not inline */
  nav ul li {
    display: block;
    text-align: center;
    border-bottom: 1pt ;
  }

  /* Sub-navs are not displayed as dropdown but beneath the
  corresponding top-nav item, if clicked */
  nav input[type='checkbox']:checked + ul {
    display: inherit;
    position: relative;
  }

  /* Disable dropdown toggle on hover  */
  nav ul li:hover > ul {
    display: none;
  }
}