Custom header with dropdown navigation

themes

(Neil Lalonde) #1

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:

<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://payments.discourse.org/buy/" 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:

<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!


Custom header logo drop down menu
How to embed my forum like this? Or maybe customize?
Why isn't there an obvious link from meta.discourse.org to discourse.org in the header?
[PAID] Custom header
How to get a header like WD and CarTalk Forums?
Need Help With Dropdown Menu
Is it possible to change HTML of header and footer and message details on the forum?
Banner in the top of the lists with sign up form
Global navigation or links
Optional Link to Main Site?
Embedding the Forum into Wordpress
#2

how do i add logo on the left?
and make the entire div it non sticky?


(Piotr Z Marek) #3

Is it possible to add this menu to mobile version? There is no place to pase your /body section.


(John ) #4

Can the CSS and HTML Customizations be used to modify the existing header?

Or only to add another one above it?


(Neil Lalonde) #5

I think to add something like that dropdown you would need to write a plugin.


(Erlend Sogge Heggen) #6

For a good reference, check out @Simon_Cossar’s Twitter stream plugin.


(Chris Saenz) #7

You can position the new header on top of the existing one. Example at http://forum.driveonwood.com


(John ) #8

Initially I was annoyed because I specifically did not want to add a new header on top in the y-axis sense. I see that you mean on top in the z-axis sense, that is precisely what I was look for, thx!


(Jide Ogunsanya) #9

Yes. If you want it to display on mobile, just remove ‘.desktop-view’ from the css


(Jay Pfaffman) #10

I just tried this and the drop-down menu is hiding behind the top bar. I’m sure the fix is easy, and one day, I’ll spend a week learning CSS so that it’ll be easy for me. Until then, any hints?

Screenshot from 2017-11-17 10-23-26


(Neil Lalonde) #11

The z-index: 1001; should have put it on top… Maybe it needs to be higher now? 1002? 2000?


(Jay Pfaffman) #12

Indeed. I changed it to z-index: 10001;.

It’s so obvious!

Thanks, @neil.