Header Menu behavior


(Roberto) #1

Hi everybody, i’ll try to get straight to the point :

I followed the How to add header menu links guide to add a new link to the nav-bar. My willing was to get a “status window” about a discord server, so i came up with this :slight_smile:

So a custom icon that open a window (can put only one image as a new user, but should be clear enough)

Everyhing is working so, my only issue is the behavior of other nav-bar links (when you click in the others it should close this tab and focus to the other)
This is my code :

<div id="top-navbar">
  <span id="top-navbar-links" style="height:20px;">
    <ul>
      <li class="dis-icon">
        <div id="discord"  class="ember-view drop-down hidden">
          <iframe src="https://discordapp.com/widget?id=127187891871809537&theme=light" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
        </div>
      </li>
    </ul>
  </span>
</div>

And the relative Js code :

$(function() {
  $(".dis-icon").click(function(){
    $("#discord").toggle();
  });
});

For now i only figured out to let the pre-existing links to close their tabs when i click in my custom link, but can’t get to work the opposite. I know it’s related to the JS listener of bootstrap, but for what i saw it seems Discourse use a different type of class (so i assumed that i should build the menu in the same way of the pre-existing links, but couldn’t find an exhaustive documentation about that :/)

Hope to get some help :slight_smile: