Come duplico il componente header del brand di Webflow?

Sviluppatore
1

Non sono un programmatore esperto, ma sono in grado di personalizzare Discourse abbastanza bene. C’è un modo per ottenere il layout esatto dell’intestazione del brand di Webflow utilizzando gli strumenti di ispezione e il componente ufficiale dell’intestazione del brand di Discourse? Mi piace anche la dimensione del loro logo, c’è un modo per migrarlo semplicemente?

image
image2570×572 39.9 KB

Ecco cosa ho recuperato dagli strumenti di ispezione:

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>

Arrivo a questo punto ma non so cosa fare da qui.

2

Vedo che hai il codice HTML. Quindi, vuoi dare un’occhiata anche al CSS, se ho capito bene la tua domanda?

Se selezioni un elemento dall’intestazione personalizzata, fai clic sul collegamento del file SCSS nella colonna di destra:

image
image2498×1370 283 KB

Verrà visualizzato il codice SCSS correlato:

image
image2498×1370 231 KB

1 Mi Piace
3

Okay, grazie per questo. Da quanto ho capito, dovrei inserire questo codice SCSS per accompagnare l’HTML nell’intestazione ufficiale del marchio, ma non sono sicuro di come modificare quel componente. Cosa sarebbe meglio qui, creare un componente personalizzato da zero o esportare il componente dell’intestazione ufficiale del marchio e modificarlo da qualche parte come VSCode? Dopo quello che mi hai mostrato, l’ho incollato in un nuovo componente che ho creato, ma capisco che non sarà sufficiente.

image
image1920×1098 96.8 KB

EDIT: Ok, penso che questo mi andrà bene, tornerò con i miei risultati. Add a custom header with a dropdown menu

1 Mi Piace