anonymousland/_includes/header.html

<header>
    <div class="row">
      <div class="col-xs-12">
        <nav class="navbar navbar-default navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <a class="navbar-toggle collapsed navbar-icon" data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1">
                <i class="fa fa-bars fa-2x"></i>
              </a>
              <a class="navbar-brand navbar-icon" href="{{ site.baseurl | append: '/'}}">
                  <i class="fa fa-home fa-2x"></i>
              </a>
            </div>
  
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
                <li><a href="{{ site.baseurl | append: '/' }}">Home</a></li>
                {% if site.blog == true %}
                  <li><a href="{{ '/blog' | prepend: site.baseurl }}">Blog</a></li>
                {% endif %}
  
                {% for page in site.dropdown %}
                  <li class="dropdown dropdown-{{ page.dropdown }}">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                      role="button" aria-haspopup="true" aria-expanded="false">{{ page.dropdown }}
                      <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-{{ page.title }}">
                      <li priority="{{ page.priority }}"><a href="{% if page.redirect_to %}{{page.redirect_to}}{% else %}{{ page.url | prepend: site.baseurl }}{% endif %}">{{ page.title }}</a></li>
                    </ul>
                  </li>
                {% endfor %}
                {% for page in site.items %}
                  <li class="nav-item"><a href="{% if page.redirect_to %}{{page.redirect_to}}{% else %}{{ page.url | prepend: site.baseurl }}{% endif %}">{{ page.title }}</a></li>
                {% endfor %}
  
                <script>
                  // clean repeated dropdowns and add <li> to their positions
                  let done = [];
                  let elements = [];
                  $(".dropdown")
                    //
                    .each((index0 , value0) => {
                      let dropdownClass = "."+$(value0)[0].classList[1];
                      if (done.indexOf(dropdownClass) !== -1) return
                      done.push(dropdownClass)
                      let dropdownMain = $(dropdownClass)[0]
                      let itemsList = $(dropdownClass+">ul>li").sort((a, b) => parseInt(b.getAttribute("priority") || -9999999) - parseInt(a.getAttribute("priority") || -9999999))
                      $(dropdownClass+">ul>li").remove();
                      $(dropdownClass+">ul").append(itemsList)
                      $(dropdownClass).remove();
                      elements.push(dropdownMain)
                  });
                  let priority = [{% for item in site.toolbar_priority %} "{{item}}", {% endfor %}];
                  elements = elements.concat(...$(".nav-item").remove())
                  priority.map(text => {
                    elements = elements.filter(node => {
                        let nodeText = node.querySelector("a").textContent.trim()
                        if (text == nodeText) {
                            $(".nav").append(node)
                            return false;
                        }
                        return true;
                    })
                  });
                  $(".nav").append(elements)
                </script>
              </ul>
            </div>
          </div>
        </nav>
      </div>
    </div>
  </header>