Wie dupliziere ich die exakte Marken-Header-Komponente von Webflow?

Entwickler
1

Ich bin kein starker Programmierer, aber ich kann Discourse ziemlich gut anpassen. Gibt es eine Möglichkeit, das genaue Layout von Webflows Marken-Header mithilfe der Inspektionswerkzeuge und der offiziellen Discourse-Marken-Header-Komponente zu erhalten? Mir gefällt auch die Größe ihres Logos, gibt es eine Möglichkeit, es einfach zu migrieren?

image
image2570×572 39.9 KB

Hier ist, was ich aus den Inspektionswerkzeugen geholt habe:

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>

Ich komme bis hierher, weiß aber nicht, wie es weitergeht.

2

Ich sehe, Sie haben den HTML-Code. Sie möchten also auch einen Blick auf das CSS werfen, wenn ich Ihre Frage richtig verstehe?

Wenn Sie ein Element aus der benutzerdefinierten Kopfzeile auswählen, klicken Sie in der rechten Spalte auf den SCSS-Datei-Link:

image
image2498×1370 283 KB

Es wird der zugehörige SCSS-Code angezeigt:

image
image2498×1370 231 KB

1 „Gefällt mir“
3

Okay, vielen Dank. Soweit ich das verstanden habe, müsste ich diesen SCSS-Code zusammen mit dem HTML in den offiziellen Marken-Header einfügen, aber ich bin mir nicht sicher, wie ich diese Komponente bearbeiten kann. Was wäre hier am besten, eine benutzerdefinierte Komponente von Grund auf neu zu erstellen oder die offizielle Marken-Header-Komponente zu exportieren und sie irgendwo wie VSCode zu bearbeiten? Nachdem Sie mir das gezeigt haben, habe ich es in eine neue Komponente eingefügt, die ich erstellt habe, aber ich verstehe, dass dies nicht ausreichen wird.

image
image1920×1098 96.8 KB

EDIT: Okay, ich glaube, das wird gut für mich sein, ich werde mit meinen Ergebnissen zurückkommen. Add a custom header with a dropdown menu

1 „Gefällt mir“