docs/static_site/src/_includes/header.html

<header class="site-header" role="banner">

  <script>
    $(document).ready(function () {

      // HEADER OPACITY LOGIC

      function opacity_header() {
        var value = "rgba(4,140,204," + ($(window).scrollTop() / 300 + 0.4) + ")"
        $('.site-header').css("background-color", value)
      }

      $(window).scroll(function () {
        opacity_header()
      })
      opacity_header();

      // MENU SELECTOR LOGIC
      $('.page-link').each( function () {
        if (window.location.href.includes(this.href)) {
          $(this).addClass("page-current");
        }
      });
    })
  </script>
  <div class="wrapper">
    <a class="site-title" rel="author" href="{{ '/' | relative_url }}"><img
            src="{{'/assets/img/mxnet_logo.png' | relative_url }}" class="site-header-logo"></a>
    <nav class="site-nav">
      <input type="checkbox" id="nav-trigger" class="nav-trigger"/>
      <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
      </label>
      <div class="gs-search-border">
        <div id="gs-search-icon"></div>
        <form id="global-search-form">
          <input id="global-search" type="text" title="Search" placeholder="Search" />
          <div id="global-search-dropdown-container">
            <button class="gs-current-version btn" type="button" data-toggle="dropdown">
                <span id="gs-current-version-label">{{site.versions[0]}}</span>
                <svg class="gs-dropdown-caret" viewBox="0 0 32 32" class="icon icon-caret-bottom" aria-hidden="true">
                    <path class="dropdown-caret-path" d="M24 11.305l-7.997 11.39L8 11.305z"></path>
                </svg>
            </button>
            <ul class="gs-opt-group gs-version-dropdown">
              {% for version in site.versions %}
                {% if version == site.versions[0] %}
                  <li class="gs-opt gs-versions active">{{version}}</li>
                {% else %}
                  <li class="gs-opt gs-versions">{{version}}</li>
                {% endif %}
              {% endfor %}
            </ul>
        </div>
          <span id="global-search-close">x</span>
        </form>
      </div>
      <div class="trigger">
        <div id="global-search-mobile-border">
          <div id="gs-search-icon-mobile"></div>
          <input id="global-search-mobile" placeholder="Search..." type="text"/>
          <div id="global-search-dropdown-container-mobile">
            <button class="gs-current-version-mobile btn" type="button" data-toggle="dropdown">
                <svg class="gs-dropdown-caret" viewBox="0 0 32 32" class="icon icon-caret-bottom" aria-hidden="true">
                    <path class="dropdown-caret-path" d="M24 11.305l-7.997 11.39L8 11.305z"></path>
                </svg>
            </button>
            <ul class="gs-opt-group gs-version-dropdown-mobile">
              {% for version in site.versions %}
                {% if version == site.versions[0] %}
                  <li class="gs-opt gs-versions active">{{version}}</li>
                {% else %}
                  <li class="gs-opt gs-versions">{{version}}</li>
                {% endif %}
              {% endfor %}
            </ul>
        </div>
        </div>
        <a class="page-link" href="{{'/get_started' | relative_url }}">Get Started</a>
        <a class="page-link" href="{{'/features' | relative_url }}">Features</a>
        <a class="page-link" href="{{'/ecosystem' | relative_url }}">Ecosystem</a>
        <a class="page-link" href="{{'/api' | relative_url }}">Docs & Tutorials</a>
        <a class="page-link" href="{{'/trusted_by' | relative_url }}">Trusted By</a>
        <a class="page-link" href="https://github.com/apache/mxnet">GitHub</a>
        <div class="dropdown" style="min-width:100px">
          <span class="dropdown-header">Apache
            <svg class="dropdown-caret" viewBox="0 0 32 32" class="icon icon-caret-bottom" aria-hidden="true"><path class="dropdown-caret-path" d="M24 11.305l-7.997 11.39L8 11.305z"></path></svg>
          </span>
          <div class="dropdown-content" style="min-width:250px">
            <a href="https://www.apache.org/foundation/">Apache Software Foundation</a>
            <a href="https://www.apache.org/licenses/">License</a>
            <a href="{{ '/api/faq/security.html' | relative_url }}">Security</a>
            <a href="https://privacy.apache.org/policies/privacy-policy-public.html">Privacy</a>
            <a href="https://www.apache.org/events/current-event">Events</a>
            <a href="https://www.apache.org/foundation/sponsorship.html">Sponsorship</a>
            <a href="https://www.apache.org/foundation/thanks.html">Thanks</a>
          </div>
        </div>
        <div class="dropdown">
          <span class="dropdown-header">master
            <svg class="dropdown-caret" viewBox="0 0 32 32" class="icon icon-caret-bottom" aria-hidden="true"><path class="dropdown-caret-path" d="M24 11.305l-7.997 11.39L8 11.305z"></path></svg>
          </span>
          <div class="dropdown-content">
            {% for version in site.versions %}
              {% if version == site.versions[0] %}
                <a class="dropdown-option-active" href="/">{{version}}</a>
              {% else %}
                <a href="/versions/{{version}}/">{{version}}</a>
              {% endif %}
            {% endfor %}
          </div>
        </div>
      </div>
    </nav>
  </div>
</header>