GESIS micro header

HTML

    <!-- GESIS micro header -->
    <header id="top" class="microsite-header">
      <div class="logo-and-navigations">
        <div class="logo-and-navigations--inner">
          <!-- logo -->
          <div class="logo-wrapper">
            <a
              title="GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen"
              href="/home"
              data-auto-event-observed="true"
            >
              <picture>
                <img
                  src="./typo3conf/ext/gesis_web_ext/Resources/Public/webpack/dist/img/logo_gesis_microsite.svg"
                  height="37"
                  alt="GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen"
                />
              </picture>
            </a>
          </div>

          <!-- GESIS back link -->
          <div class="navigations-wrapper">
            <section class="desktop-only">
              <a
                title="GESIS Leibniz Institute for the Social Sciences: Go to homepage"
                href="/home"
                data-auto-event-observed="true"
              >
                <picture>
                  <img
                    src="./typo3conf/ext/gesis_web_ext/Resources/Public/webpack/dist/img/back-2-gesis.svg"
                    height="37"
                    alt="GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen"
                  />
                </picture>
              </a>

              <!-- top-navigation desktop -->
              <nav class="gs_topnav" aria-label="Quick Links">
                <ul class="list-group list-group-horizontal">
                  <li>
                    <a
                      href="/en/allbus"
                      hreflang="en"
                      aria-label="English page version"
                      data-auto-event-observed="true"
                    >
                      <span class="icon-gs-lang pe-1"></span>
                      <span class="d-md-inline">English</span>
                    </a>
                  </li>
                  <li>
                    <a href="/institut/kontakt" data-auto-event-observed="true"></a>
                      <span class="icon-gs-contact pe-1"></span>
                      <span class="d-md-inline">Kontakt</span>
                    </a>
                  </li>
                  <li>
                    <a href="/institut/karriere" data-auto-event-observed="true" > 
                      <span class="icon-gs-help pe-1"></span > 
                      <span class="d-md-inline">Karriere</span> 
                    </a>
                  </li>
                </ul>
              </nav>
            </section>
          </div>
        </div>
      </div>

      <!-- GWS -->
      <div class="gesis-search-wrapper">
        <div
          class="col col-sm-10 col-md-9 col-lg-8 mx-auto"
          role="search"
          aria-label="GESIS-Suche"
        >
          <div
            id="gs_gws_combobox"
            class="gs_combobox py-3 px-1"
            role="combobox"
            aria-expanded="false"
            aria-haspopup="listbox"
            aria-atomic="false"
            aria-live="assertive"
          >
            <div class="gs-search-input-wrapper d-flex justify-content-between">
              <div
                class="gs_search_facet col col-md-3 col-sm-3 col-lg-2 mx-auto"
              >
                <select>
                  <option>Alles</option>
                  <!--<option>Daten</option>-->
                  <!--<option>Publikationen</option>-->
                </select>
              </div>
              <div class="col clear-input-container">
                <input
                  name="query"
                  id="gs_searchterm"
                  class="gs_searchterm clear-input"
                  type="search"
                  size="15"
                  placeholder="GESIS durchsuchen…"
                  aria-controls="gs_hitlist"
                  aria-owns="gs_hitlist"
                  aria-label="Suchanfrage"
                />
                <button
                  id="clear-input-button"
                  type="reset"
                  aria-label="Suche löschen"
                  title="Suche löschen"
                >
                  <i class="bi bi-x-lg"></i>
                </button>
              </div>
              <button
                id="gs_search_toggle"
                class="gs_search_toggle col-1"
                tabindex="-1"
                title="Suchergebnisse anzeigen oder verbergen"
                aria-label="Suchergebnisse anzeigen oder verbergen"
              ></button>
            </div>
            <div
              id="gs_hitlist"
              class="gs_hitlist position-absolute start-0 mt-3 w-100 bg-light"
              role="listbox"
              tabindex="-1"
              aria-hidden="true"
            ></div>
          </div>
        </div>
      </div>
    </header>