# Add a custom header with a dropdown menu

**URL:** https://meta.discourse.org/t/add-a-custom-header-with-a-dropdown-menu/33451
**Category:** Development
**Tags:** how-to, theme-guides
**Created:** [September 18, 2015, 9:23pm UTC](https://meta.discourse.org/t/add-a-custom-header-with-a-dropdown-menu/33451 "2015-09-18T21:23:11Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![neil](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/neil/32/102150_2.png) [@neil](https://meta.discourse.org/u/neil)
#### Post date: [September 18, 2015, 9:23pm UTC](https://meta.discourse.org/t/add-a-custom-header-with-a-dropdown-menu/33451/1 "2015-09-18T21:23:11Z")

</div>

We’ll be implementing a black header with one link that reveals a menu of more links, like this:

 ![](https://global.discourse-cdn.com/meta/original/3X/4/0/400b7559b2c054526ab45b0085a312f72f31fc17.png)

In Admin \> Customize \> CSS/HTML, create a new customization. Remember that you can have multiple customizations active at the same time, so it’s a good idea to use many of them instead of one giant one for everything. For this custom header, create a new customization called “Header Nav”.

 ![](https://global.discourse-cdn.com/meta/original/3X/a/2/a2a885c01cdc659da0e05035b39d69b5f2d9176c.png)

To implement this sample nav, we need some CSS, HTML, and javascript to show and hide the dropdown menu.

In the CSS tab:

```plaintext
/ **********Sticky Nav********** /

.desktop-view body #main {
  padding-top: 74px;
}

#top-navbar {
  height:60px;
  background-color:#222;
  width:100%;
  position: fixed;
  z-index: 1001;
}

.desktop-view body header.d-header {
  top: 59px;
  padding-top: 6px;
}

div#top-navbar-links {
  width:100%;
  margin: 0 auto;
  padding-top: 0;
  max-width:1100px;
  margin-top: 0;
}

div#top-navbar-links a, div#top-navbar-links span {
  color:#eee;
  font-size: 14px;
}

/* js dropdown navs */
#top-external-nav {
  float: right;
  margin-top: 12px;
  position: relative;

  list-style: none;

  li.top-ext--main {
    float: left;
    margin-right: 10px;
    > a, > a:visited, > a:active {
      display: inline-block;
      padding: 6px 10px;
      font-size: 14px;
      color: #999999;
      &:hover {
        background-color: black;
      }
    }
  }

  #top-discourse-link a.top-discourse-link-main {
    padding: 6px 10px 20px 10px;
  }

  ul.top-ext--sub {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    margin-left: 0;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0, .5);
    list-style: none;

    li.top-ext--sub-item {
      float: none;
      padding: 0;
      margin: 0;
      background-color: white;
      a, a:visited {
        display: inline-block;
        width: 190px;
        padding: 8px 10px;
        span {
          font-size: 14px;
          color: #666;
        }

        img {
          width: 20px;
          margin-right: 6px;
        }
      }

      &:hover {
        background-color: #eef;
      }
    }
  }
}

```

In the Header tab, we add the HTML with our navigation links:

```plaintext
<div id="top-navbar">
  <div id="top-navbar-links">
    <ul id="top-external-nav">
      <li class="top-ext--main" id="top-discourse-link">
        <a class="top-ext--link top-discourse-link-main" href="http://www.discourse.org/">Discourse</a>
        <ul class="top-ext--sub" id="top-discourse-sub">
          <li class="top-ext--sub-item">
            <a class="top-ext--link" href="https://meta.discourse.org" target="blank">
              <span>Meta</span>
            </a>
          </li>
          <li class="top-ext--sub-item">
            <a class="top-ext--link" href="http://try.discourse.org/" target="blank">
              <span>Try</span>
            </a>
          </li>
          <li class="top-ext--sub-item">
            <a class="top-ext--link" href="https://www.discourse.org/faq/" target="blank">
              <span>FAQ</span>
            </a>
          </li>
        </ul>
      </li>

      <li class="top-ext--main">
        <a class="top-ext--link" href="http://blog.discourse.org/" target="blank">Blog</a>
      </li>

      <li class="top-ext--main">
        <a class="top-ext--link" href="https://discourse.org/pricing" target="blank">Buy It</a>
      </li>
    </ul>
  </div>
</div>

```

Finally, in the `</body>` tab, we add the javascript to get the dropdown menu to appear and disappear:

```plaintext
<script type="text/javascript">
$(function() {
  var $topDiscourseSub = $('#top-discourse-sub');
  $('#top-discourse-link').hover(function() {
    $topDiscourseSub.show();
  }, function() {
    $topDiscourseSub.hide();
  });
});
</script>

```

Check the “enabled” checkbox and Save it. View the site in another tab to see it in action!

* * *

Additional Discourse Customization Documents:

> [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)  
> [Developer’s guide to Discourse Themes](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648)  
> [Beginners’ guide to using Theme Creator and Theme CLI to start building a Discourse theme](https://meta.discourse.org/t/beginners-guide-to-using-theme-creator-and-theme-cli-to-start-building-a-discourse-theme/108444)  
> [Designer’s Guide to Discourse Themes](https://meta.discourse.org/t/designers-guide-to-discourse-themes/152002)

* * *

_Last Reviewed by @SaraDev on 2022-06-02T01:00:00Z_