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

3

네, 감사합니다. 제 이해가 맞다면, 공식 브랜드 헤더와 함께 사용할 이 SCSS 코드를 HTML에 추가해야 하는 것 같은데, 해당 컴포넌트를 어떻게 수정해야 할지 확실하지 않습니다. 지금 상황에서 가장 좋은 방법은 처음부터 커스텀 컴포넌트를 만드는 것일까요, 아니면 공식 브랜드 헤더 컴포넌트를 내보내서 VSCode 같은 곳에서 수정하는 것일까요? 말씀해 주신 내용을 보고 제가 새로 만든 컴포넌트에 붙여넣어 봤는데, 이것만으로는 충분하지 않다는 걸 알고 있습니다.

image
image1920×1098 96.8 KB

수정: 네, 제 생각에는 이게 제게 좋을 것 같습니다. 결과를 가지고 다시 돌아오겠습니다. Add a custom header with a dropdown menu