public/assets/scss/navbar.scss

.navbar-search {
  button {
    height: $navbar-height;
    width: $navbar-height;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
  }

  .button.is-dark:focus:not(:active), .button.is-dark.is-focused:not(:active) {
    box-shadow: none !important;
  }
}

@media (max-width: 1023px) {
  .navbar-search {
    position: absolute;
    top: 0;
    right: $navbar-height;
    padding: 0;

    #search {
      span {
        margin-top: 8px;
        display: inline-block;
      }
    }

    .dropdown {
      .dropdown-menu {
        left: auto !important;
        right: -$navbar-height !important;
      }
    }
  }

  #search-menu {
    min-width: 90vw;
  }

  #search-results {
    max-height: 75vh;
    overflow-y: scroll;

    a:focus {
      outline: none !important;
    }
  }
}

@media (min-width: 1024px) {
  .navbar-search {
    .dropdown {
      .dropdown-menu { // .is-right
        left: auto !important;
        right: 0 !important;
      }
    }
  }

  #search-menu {
    min-width: 45rem;
  }

  #search-results {
    max-height: 75vh;
    overflow-y: scroll;

    a:focus {
      outline: none !important;
    }
  }
}

.navbar-item.is-fullwidth {
  position: static;

  .navbar-dropdown {
    margin-left: -12px;
    box-shadow: 0 10000px 0 10000px rgba(0,0,0,.5);

    .columns {
      margin: 0 -32px;
    }

    img {
      max-height: none !important;
    }

    .title {
      text-transform: uppercase;
      padding-left: 1rem;
    }
  }
}