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

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?

Here is what I grabbed from the inspect tools:

<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=""><img alt="home" class="logoimage" src="" width="87">
    <a class="logo w-clearfix w-nav-brand" href="">
      <div class="portalname">Forum</div>
    <nav class="nav-menu w-nav-menu" role="navigation">
      <a class="navlink w-nav-link" href="">Community</a>
      <a class="navlink w-nav-link" href="">University</a>
      <a class="navlink w-nav-link" href="">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>
        <nav class="dropdownmenu w-dropdown-list">
          <a class="dropdownmenulink w-dropdown-link" href="">Wishlist</a>
          <a class="dropdownmenulink w-dropdown-link" href="">API Docs</a>
          <a class="dropdownmenulink w-dropdown-link" href="">Glossary</a>
          <a class="dropdownmenulink w-dropdown-link" href="">Integrations</a>
    <div class="menubutton w-nav-button">
      <div class="menubuttonicon w-icon-nav-menu"></div>

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

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:

It will show the related SCSS code:

1 Like

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.

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

1 Like