كيف يمكنني تكرار مكون رأس العلامة التجارية الخاص بـ Webflow بالضبط؟

لست مبرمجًا قويًا، ولكني قادر على تخصيص Discourse بشكل جيد. هل هناك طريقة يمكنني من خلالها الحصول على التخطيط الدقيق لرأس علامة Webflow التجارية باستخدام أدوات الفحص ومكون رأس علامة Discourse التجارية الرسمي؟ أحب حجم شعارهم أيضًا، هل هناك طريقة لترحيله فقط؟

هذا ما حصلت عليه من أدوات الفحص:

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

أصل إلى هذه النقطة ولكني لا أعرف ماذا أفعل من هنا.

أرى أن لديك رمز HTML. لذا، هل تريد إلقاء نظرة على CSS أيضًا إذا فهمت سؤالك بشكل صحيح؟

إذا قمت بتحديد عنصر من الرأس المخصص، فانقر على رابط ملف SCSS في العمود الأيمن:

سيؤدي ذلك إلى عرض رمز SCSS المتعلق به:

إعجاب واحد (1)

حسنًا، شكرًا لك على ذلك. حسب فهمي، سأحتاج إلى وضع كود SCSS هذا لمرافقة HTML في ترويسة العلامة التجارية الرسمية، لكنني لست متأكدًا من كيفية تعديل هذا المكون. ما هو الأفضل هنا، إنشاء مكون مخصص من الصفر أم تصدير مكون ترويسة العلامة التجارية الرسمي وتعديله في مكان ما مثل VSCode؟ بعد ما أريتني، قمت بلصقه في مكون جديد صنعته، لكنني أفهم أن هذا لن يكون كافيًا.

تعديل: حسنًا، أعتقد أن هذا سيكون جيدًا بالنسبة لي، وسأعود بنتائجي. Add a custom header with a dropdown menu

إعجاب واحد (1)