/* Keep the navigation bar visible at every screen width.
 *
 * Divi ships this rule, which lets the header scroll away on tablet and phone:
 *     @media (max-width: 980px) { .et_fixed_nav #main-header { position: absolute } }
 * Above 980px the header is already fixed, so only the small-screen case needs
 * overriding. !important is needed because Divi's rule has equal specificity and
 * some of its stylesheets load deferred, after this file.
 *
 * No extra top spacing is required: #page-container already carries ~79px of
 * padding-top, which keeps content clear of the header.
 *
 * The mobile dropdown is positioned directly beneath the header. Once the header
 * stops scrolling, a long menu on a short screen (landscape phone) would run past
 * the bottom of the viewport with no way to reach the last items - so cap its
 * height and let it scroll on its own.
 */
@media (max-width: 980px) {
  .et_fixed_nav #main-header {
    position: fixed !important;
    top: 0 !important;
  }

  #main-header .et_mobile_menu {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}