I recently made a dropdown navigation menu for Envato’s new forums, so I’ll share some code to implement something similar on your own site.

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

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”.

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

In the CSS tab:

/********** 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:

Finally, in the