¿Cómo duplico el componente de encabezado de marca exacto de Webflow?

[Valcoholics (Valerie Andy)]

No soy un programador experto, pero puedo personalizar Discourse bastante bien. ¿Hay alguna forma de obtener el diseño exacto del encabezado de marca de Webflow utilizando las herramientas de inspección y el componente oficial de encabezado de marca de Discourse? Me gusta el tamaño de su logo también, ¿hay alguna forma de migrarlo?

Aquí está lo que obtuve de las herramientas de inspección:

<div class="navbar w-nav" data-animation="default" data-collapse="small" data-duration="400">
  <div class="customcontainer w-clearfix">
    <a class="logo w-clearfix w-nav-brand" href="https://webflow.com"><img alt="home" class="logoimage" src="https://daks2k3a4ib2z.cloudfront.net/55e66dd8b5daada24f333566/560dc3d501b66e250aca54d7_webflow-white.svg" width="87">
    </a>
    <a class="logo w-clearfix w-nav-brand" href="https://discourse.webflow.com">
      <div class="portalname">Forum</div>
    </a>
    <nav class="nav-menu w-nav-menu" role="navigation">
      <a class="navlink w-nav-link" href="https://webflow.com/community">Community</a>
      <a class="navlink w-nav-link" href="https://university.webflow.com/">University</a>
      <a class="navlink w-nav-link" href="https://university.webflow.com/contact">Support</a>
      <div class="w-dropdown" data-delay="0" data-hover="1">
        <div class="navdropdown w-dropdown-toggle">
          <div class="navdropdowntext">More</div>
          <div class="navdropdownicon w-icon-dropdown-toggle"></div>
        </div>
        <nav class="dropdownmenu w-dropdown-list">
          <a class="dropdownmenulink w-dropdown-link" href="https://wishlist.webflow.com/">Wishlist</a>
          <a class="dropdownmenulink w-dropdown-link" href="https://developers.webflow.com">API Docs</a>
          <a class="dropdownmenulink w-dropdown-link" href="https://university.webflow.com/glossary">Glossary</a>
          <a class="dropdownmenulink w-dropdown-link" href="https://university.webflow.com/integrations">Integrations</a>
        </nav>
      </div>
    </nav>
    <div class="menubutton w-nav-button">
      <div class="menubuttonicon w-icon-nav-menu"></div>
    </div>
  </div>
</div>

Llego a esta parte pero no sé qué hacer a partir de aquí.

[Canapin (Coin-coin le Canapin)]

Veo que tienes el código HTML. Entonces, ¿quieres ver también el CSS si entiendo bien tu pregunta?

Si seleccionas un elemento del encabezado personalizado, haz clic en el enlace del archivo SCSS en la columna de la derecha:

Se mostrará el código SCSS relacionado:

[Valcoholics (Valerie Andy)]

De acuerdo, gracias por eso. Según entiendo, tendría que colocar este código SCSS para acompañar al HTML en el encabezado oficial de la marca, pero no estoy seguro de cómo editar ese componente. ¿Qué sería lo mejor aquí, crear un componente personalizado desde cero o exportar el componente oficial del encabezado de la marca y editarlo en algún lugar como VSCode? Después de lo que me mostraste, lo pegué en un nuevo componente que hice, pero entiendo que esto no será suficiente.

EDITAR: Ok, creo que esto me servirá, volveré con mis resultados. Add a custom header with a dropdown menu