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

**URL:** https://meta.discourse.org/t/how-do-i-duplicate-webflows-exact-brand-header-component/252799
**Category:** Development
**Created:** [January 24, 2023, 10:30pm UTC](https://meta.discourse.org/t/how-do-i-duplicate-webflows-exact-brand-header-component/252799 "2023-01-24T22:30:45Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Valcoholics](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/valcoholics/32/286339_2.png) [@Valcoholics](https://meta.discourse.org/u/Valcoholics)
#### Post date: [January 24, 2023, 10:30pm UTC](https://meta.discourse.org/t/how-do-i-duplicate-webflows-exact-brand-header-component/252799/1 "2023-01-24T22:30:45Z")

</div>

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](https://global.discourse-cdn.com/meta/original/4X/5/c/f/5cf8d67db622ccddcc169ac0614182a0d2d68e52.png)

Here is what I grabbed from the inspect tools:

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/1/1/21156a60e2c6d3674d6e9b3f3936c5b400fc3408.png)

```plaintext
<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.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [January 24, 2023, 10:52pm UTC](https://meta.discourse.org/t/how-do-i-duplicate-webflows-exact-brand-header-component/252799/2 "2023-01-24T22:52:26Z")

</div>

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](https://global.discourse-cdn.com/meta/original/4X/c/1/7/c176af916e1335254f46c1dabccab41d4d2d7bb0.png)

It will show the related SCSS code:

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/6/7/867a06c6ecec84d305c05ea59d5488f8569168a7.png)

---

<div class="post-metadata">

### Author: ![Valcoholics](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/valcoholics/32/286339_2.png) [@Valcoholics](https://meta.discourse.org/u/Valcoholics)
#### Post date: [January 24, 2023, 11:09pm UTC](https://meta.discourse.org/t/how-do-i-duplicate-webflows-exact-brand-header-component/252799/3 "2023-01-24T23:09:44Z")

</div>

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](https://global.discourse-cdn.com/meta/original/4X/0/9/4/0948b0bd91178f40a13ff54f3e11e0e67aeb6d4e.jpeg)

EDIT: Ok I think this will be good for me, will come back with my results. [Add a custom header with a dropdown menu](https://meta.discourse.org/t/add-a-custom-header-with-a-dropdown-menu/33451)