How Do I Duplicate Webflow's Exact Brand Header Component?

Development

AI-generated summary

The user Valcoholics wants to duplicate Webflow’s exact brand header component in their Discourse instance. They provided the HTML code obtained from inspecting the element but are unsure how to proceed. Canapin suggested that they also need the CSS code, which can be found by selecting an element and clicking on the SCSS file link.

Valcoholics is now considering how to integrate the SCSS code with the official brand header component. They have two options: creating a custom component from scratch or exporting the official brand header component and editing it in a code editor like Visual Studio Code. Valcoholics found a helpful guide on meta.discourse.org and plans to try it and report back with their results.

1

I am not a strong coder, but I am able to customize Discourse pretty well. Is there a way I can I get the exact layout for Webflow’s brand header through using the inspect tools and the official Discourse brand header component. I like the size of their logo as well, any way to just migrate it?

image
image2570×572 39.9 KB

Here is what I grabbed from the inspect tools:

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>

I get to this part but don’t know what to do from here.

2

I see you have the HTML code. So, you want a look at the CSS as well if I understand well your question?

If you select an element from the custom header, click on the SCSS file link in the right column:

image
image2498×1370 283 KB

It will show the related SCSS code:

image
image2498×1370 231 KB

3

Okay, thank you for that. From my understanding I would have to place this SCSS code to accompany the HTML in official brand header but I am not sure how edit that component. What would be best here, making a custom component from scratch or exporting the official brand header component and editing it somewhere like VSCode? After what you showed me I pasted it into a new component I made but I understand this will not be enough.

image
image1920×1098 96.8 KB

EDIT: Ok I think this will be good for me, will come back with my results. Add a custom header with a dropdown menu