hns.ws/assets/style/components/header.css

header {
  position: fixed;
  width: 100%;
  top: 0;
  background: var(--b-color);
  opacity: .96;
  z-index: 99;

  .nav {
    display: grid;
    grid-template-columns: 12rem calc(100% - 28rem) 16rem;
    max-width: 50rem;
    padding: 1rem;
    margin: 0 auto;

    .logo {
      width: fit-content;
      font-size: 1rem;
      font-weight: 700;
      margin: .5rem 1rem;
    }

    .cta,
    .links {
      text-align: right;
      list-style-type: none;
      white-space: nowrap;
      padding: 0;
      margin: .5rem .25rem 0 0;

      li {
        display: inline-block;
        margin: 0 .5rem;

        a {
          color: var(--fs-color);
          font-size: .85rem;
  
          &:hover {
            color: var(--f-color);
            text-decoration: underline;
          }
        }

        .highlight {
          color: var(--fh-color);
        }
      }
    }

    .cta {
      text-align: right;
      margin: .8rem 0 0 0;
    }

    .search {
      position: relative;
      padding: 0 1rem;

      .redirect {
        position: absolute;
        right: 1rem;
        top: 0;
        font-size: .85rem;
        padding: .7rem .85rem .6rem .75rem;

        &:hover {
          cursor: pointer;
        }
      }

      input {
        position: relative;
        width: 100%;
        color: var(--f-color);
        background: var(--b-color);
        font-size: .8rem;
        font-weight: 400;
        padding: .6rem .75rem;
        border: .1rem solid var(--hr-color);
        outline: none;
  
        &:focus {
          border-color: var(--btns-color);
        }
  
        &::placeholder {
          font-family: var(--p-font);
          font-size: .8rem;
          opacity: .8;
        }
      }

      @-moz-document url-prefix() {
        input {
          &::placeholder {
            opacity: .45;
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 480px) {
  header {
    .nav {
      grid-template-columns: 10.5rem calc(100% - 14rem) 3.5rem;
      padding: .75rem .5rem;

      .menu-btn {
        grid-column: 3;
        color: var(--dfs-color);
        font-size: 1.25rem;
        padding: .3rem 1rem;
        margin: .25rem 0 0 0;

        .icon-menu,
        .icon-x {
          position: absolute;
          padding: 0;

          &:hover {
            cursor: pointer;
          }
        }

        .icon-menu {
          right: 1.5rem;
        }

        .icon-x {
          right: 1.65rem;
        }
      }

      .search {
        display: none;
      }

      .menu {
        position: fixed;
        top: 4.05rem;
        left: 0;
        width: 100%;
        height: calc(100vh - 4.05rem);
        background: var(--b-color);

        .links {
          margin: 2rem 1rem;

          li {
            display: block;
            padding: .25rem;
            margin: .5rem .725rem;

            a {
              font-size: 2rem;
            }
          }
        }
      }
    }
  }
}