lib.itmens/common/static/scss/_header.scss

body {
  &>header.container-fluid {
    padding: 0px;

    &>nav {
      ul.nav-logo {
        margin-left: var(--pico-nav-link-spacing-horizontal);
      }

      .nav-search form {
        margin-bottom: 0px;
      }

      details.dropdown summary:not([role]) {
        border-color: transparent;
        background-color: transparent;
      }

      ul {
        min-width: -webkit-max-content;
        min-width: -moz-max-content;
      }

      ul li a.current {
        font-weight: bold;
        color: var(--pico-primary);
      }


      .nav-search,
      .nav-search li {
        width: 100%;
      }

      .nav-search select {
        max-width: max-content;
      }

      .nav-search input[type="submit"] {
        background-color: var(--pico-primary-background);
        border-color: var(--pico-primary-background);
        padding-left: calc(var(--pico-nav-link-spacing-horizontal)*2);
        padding-right: calc(var(--pico-nav-link-spacing-horizontal)*2);
      }

      .nav-logo img {
        max-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 - var(--pico-nav-link-spacing-horizontal) * 2);
      }

      /* Dark color scheme (Auto) */
      /* Automatically enabled if user has Dark mode enabled */
      @media only screen and (prefers-color-scheme: dark) {
        .nav-logo img {
          filter: brightness(100%) grayscale(100%) invert(20%);
        }
      }

      /* Dark color scheme (Forced) */
      /* Enabled if forced with data-theme="dark" */
      .nav-logo img [data-theme="dark"] {
        filter: brightness(100%) grayscale(100%) invert(20%);
      }

      .unhide {
        display: unset !important;
      }

      .nav-dropdown summary {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
      }

      .nav-dropdown summary::after {
        height: calc(1rem * var(--pico-line-height, 1.5) + 8px) !important;
      }

      .nav-dropdown {
        margin-right: 0rem !important;

        // this fixes positioning in iOS 14 and lower but will break in other browsers and iOS 15+
        // details.dropdown {
        //   display: block !important;
        // }

        ul li a {
          padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal) !important
        }
      }

      .avatar {
        display: inline;

        img {
          height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2 - var(--pico-border-width) * 2);
          width: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2 - var(--pico-border-width) * 2);
        }
      }
    }
  }

  //pack for small phones like iPhone 5s
  @media (max-width: 320px) {
    .nav-dropdown {
      li {
        padding-left: 0;
        padding-right: 0;

        summary {
          padding: 0 !important;
        }

        details.dropdown summary::after {
          width: 0;
        }
      }
    }
  }

  @media (max-width: 768px) {
    body>header {
      position: sticky;
      top: 0px;
      background: var(--pico-background-color);
      z-index: 999;
      box-shadow: var(--pico-box-shadow);
    }

    nav {
      display: flex;
      flex-flow: row wrap;
    }

    .nav-search {
      order: 999;
      display: none;
      min-width: unset !important;
      li {
        padding: 0px;
        padding-bottom: 4px;
        select {
          max-width: 6em !important;
        }
        input[type="submit"] {
          padding-left: calc(var(--pico-nav-link-spacing-horizontal)*1);
          padding-right: calc(var(--pico-nav-link-spacing-horizontal)*1);
        }
      }
    }

    .nav-links li.small-only {
      font-size: 150%;
      a {
        color: var(--pico-secondary);
      }
    }
    .nav-dropdown {
      li {
        padding-left: 0;
        padding-right: 0;

        summary {
          padding: 0 !important;
        }
      }
    }
    /*
    .nav-dropdown::after {
      flex-basis: 100%;
      width: 0;
    }
    */
  }
}