Como Duplicar o Componente de Cabeçalho de Marca Exato do Webflow?

Dev
1

Não sou um programador experiente, mas consigo personalizar bem o Discourse. Existe alguma maneira de obter o layout exato do cabeçalho da marca do Webflow usando as ferramentas de inspeção e o componente oficial de cabeçalho da marca do Discourse? Eu gosto do tamanho do logotipo deles também, há alguma maneira de apenas migrá-lo?

image
image2570×572 39.9 KB

Aqui está o que eu peguei das ferramentas de inspeção:

image
image1504×982 172 KB

<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>

Eu chego a esta parte, mas não sei o que fazer a partir daqui.

2

Vejo que você tem o código HTML. Então, você quer dar uma olhada no CSS também, se entendi bem sua pergunta?

Se você selecionar um elemento do cabeçalho personalizado, clique no link do arquivo SCSS na coluna da direita:

image
image2498×1370 283 KB

Ele mostrará o código SCSS relacionado:

image
image2498×1370 231 KB

1 curtida
3

Ok, obrigado por isso. Pelo que entendi, eu teria que colocar este código SCSS para acompanhar o HTML no cabeçalho oficial da marca, mas não tenho certeza de como editar esse componente. O que seria melhor aqui, criar um componente personalizado do zero ou exportar o componente oficial do cabeçalho da marca e editá-lo em algum lugar como o VSCode? Depois do que você me mostrou, colei em um novo componente que fiz, mas entendo que isso não será suficiente.

image
image1920×1098 96.8 KB

EDIT: Ok, acho que isso será bom para mim, voltarei com meus resultados. Add a custom header with a dropdown menu

1 curtida