header.html

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

<div class="wrapper">
  <img class="logo-float-left" alt="" src="{{ site.url }}/images/elements_logo_no_border.svg" />
  {%- assign default_paths = site.pages | map: "path" -%}
  {%- assign page_paths = site.header_pages | default: default_paths -%}
  <span><a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a></span>
</div>

<nav class="navbar navbar-default navbar-elements-narrow">
  <div class="container-fluid">

    <!-- Enable mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsing-nav-bar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <!-- Nav links for toggling -->
    <div class="collapse navbar-collapse" id="collapsing-nav-bar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/how-it-works">How it works</a></li>
        <li><a href="/features">Features</a></li>
        <li><a href="/community">Community</a></li>
        <li><a href="/en/doc">RPC Docs</a></li>
        <li><a href="https://github.com/ElementsProject/elements/releases">Download</a></li>

        <li class="dropdown">
          <a data-toggle="dropdown" role="button">Code Tutorial<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="/elements-code-tutorial/overview">Tutorial Overview</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="/elements-code-tutorial/installing-bitcoin">Installing Bitcoin</a></li>
            <li><a href="/elements-code-tutorial/installing-elements">Installing Elements</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="/elements-code-tutorial/working-environment">Setting up your working environment</a></li>
            <li><a href="/elements-code-tutorial/basic-operations">Using Elements to perform basic operations</a></li>
            <li><a href="/elements-code-tutorial/confidential-transactions">Using Confidential Transactions</a></li>
            <li><a href="/elements-code-tutorial/issuing-assets">Issuing your own assets</a></li>
            <li><a href="/elements-code-tutorial/reissuing-assets">Reissuing assets</a></li>
            <li><a href="/elements-code-tutorial/block-creation">Block creation in a Strong Federation</a></li>
            <li><a href="/elements-code-tutorial/sidechain">Elements as a Sidechain</a></li>
            <li><a href="/elements-code-tutorial/blockchain">Elements as a standalone Blockchain</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="/elements-code-tutorial/application-development">Developing applications on Elements</a></li>
            <li><a href="/elements-code-tutorial/desktop-application-python">Desktop application example in Python</a></li>
            <li><a href="/elements-code-tutorial/web-application">Web application example in Python using Flask</a></li>
            <li><a href="/elements-code-tutorial/desktop-application-dotnetcore">Desktop application example in C# using .NET Core</a></li>
            <li><a href="/elements-code-tutorial/web-application-dotnetcore">MVC Web application example in C# using .NET Core</a></li>
            <li><a href="/elements-code-tutorial/other-languages">Node.js, Go, Ruby, Java, Perl examples</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="/elements-code-tutorial/easy-run-code">An easy way to run the main tutorial code</a></li>
            <li><a href="/elements-code-tutorial/advanced-examples">Advanced examples</a></li>
            <li><a href="/elements-code-tutorial/building-elements-from-source">Building Elements from source</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="https://github.com/ElementsProject/elements">Elements on Github</a></li>
          </ul>
        </li>
      </ul>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<script>
$(document).ready(function() {
  // Assign the 'active' class for currently viewed page

  var pathname = window.location.pathname;
  // Remove trailng '/'
  if (pathname.charAt(pathname.length - 1) == '/') {
    pathname = pathname.substr(0, pathname.length - 1);
  }

  // Sub pages not in sub menu (e.g. features/confidential-transactions)
  var secondForwardSlashIndex = pathname.indexOf("/", 1);
  if (-1 != secondForwardSlashIndex)
  {
    mainpathname = pathname.substr(0, secondForwardSlashIndex);
    $('.nav > li > a[href="'+mainpathname+'"]').parent().addClass('active');
  }

  // Top level nav bar item
  $('.nav > li > a[href="'+pathname+'"]').parent().addClass('active');

  // Nav bar drop down item - must be linked to with the "/" prefix (e.g. /elements-code-tutorial/) in the menu html above
  $('.nav > li > ul> li > a[href="'+pathname+'"]').parent().parent().parent().addClass('active');

  // Nav bar drop down sub item
  $('.nav > li > ul> li > a[href="'+pathname+'"]').parent().addClass('active');
})
</script>

</header>