Webflowのブランドヘッダーコンポーネントを正確に複製するにはどうすればよいですか？

開発
1

私はコーディングは得意ではありませんが、Discourse のカスタマイズはかなりうまくできます。Webflow のブランドヘッダーの正確なレイアウトを、インスペクトツールと公式 Discourse ブランドヘッダーコンポーネントを使用して取得する方法はありますか？ロゴのサイズも気に入っています。そのまま移行する方法はありますか？

image
image2570×572 39.9 KB

インスペクトツールから取得したものは次のとおりです。

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>

ここまでたどり着きましたが、ここからどうすればいいかわかりません。

2

HTMLコードをお持ちのようですが、私の理解が正しければ、CSSもご覧になりたいということでしょうか？

カスタムヘッダーから要素を選択した場合、右側の列にあるSCSSファイルリンクをクリックします。

image
image2498×1370 283 KB

関連するSCSSコードが表示されます。

image
image2498×1370 231 KB

「いいね！」 1
3

承知いたしました。私の理解では、このSCSSコードを公式ブランドヘッダーのHTMLに加えて配置する必要があるということですが、そのコンポーネントをどのように編集すればよいかわかりません。ここで最善の方法は何でしょうか？カスタムコンポーネントをゼロから作成することでしょうか、それとも公式ブランドヘッダーコンポーネントをエクスポートしてVSCodeのような場所で編集することでしょうか？お見せした後に、新しく作成したコンポーネントに貼り付けましたが、これだけでは不十分であることは理解しています。

image
image1920×1098 96.8 KB

編集：わかりました、これで十分だと思います。結果を持って戻ってきます。Add a custom header with a dropdown menu

「いいね！」 1