<div id="navigation" class="sticky"> <nav class="top-bar" data-topbar> <ul class="title-area"> <li class="name"> <h1 class="show-for-small-only"><a href="{{ site.url }}" class="icon-tree"> {{ site.title }}</a></h1> </li> <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> <li class="toggle-topbar menu-icon"><a href="#"><span>Navigation</span></a></li> </ul> <section class="top-bar-section"> {% comment %} ____ _ __ __ _ __ _ __ _ / __ \(_)___ _/ /_ / /_ / | / /___ __ __(_)___ _____ _/ /_(_)___ ____ / /_/ / / __ `/ __ \/ __/ / |/ / __ `/ | / / / __ `/ __ `/ __/ / __ \/ __ \ / _, _/ / /_/ / / / / /_ / /| / /_/ /| |/ / / /_/ / /_/ / /_/ / /_/ / / / / /_/ |_/_/\__, /_/ /_/\__/ /_/ |_/\__,_/ |___/_/\__, /\__,_/\__/_/\____/_/ /_/ /____/ /____/ {% endcomment %} <ul class="right"> {% for link in site.data.navigation %} {% if link.url contains 'http' %} {% assign domain = '' %} {% elsif link.url == '#' %} {% assign domain = '' %} {% else %} {% assign domain = site.url %} {% endif %} {% comment %} If there are links for right side begin {% endcomment %} {% if link.side == 'right' %} {% comment %} If right side WITHOUT dropdown menu do {% endcomment %} {% if link.dropdown == nil %} <li class="divider"></li> <li{% if link.url == page.url %} class="active"{% endif %}><a href="{{ domain }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title }}</a></li> {% comment %} If right side WITH dropdown menu do {% endcomment %} {% else %} <li class="divider"></li> <li class="has-dropdown{% if link.url == page.url %} active{% endif %}"> <a href="{{ domain }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title }}</a> <ul class="dropdown"> {% for dropdown_link in link.dropdown %} {% if dropdown_link.url contains 'http' %} {% assign domain = '' %} {% else %} {% assign domain = site.url %} {% endif %} <li><a href="{{ domain }}{{ dropdown_link.url }}"{% if dropdown_link.url contains 'http' %} target="_blank"{% endif %}>{{ dropdown_link.title }}</a></li> {% endfor %} </ul> </li> {% endif %} {% endif %} {% endfor %} {% comment %} First loop finished 1 {% endcomment %} </ul> {% comment %} __ ______ _ __ _ __ _ / / ___ / __/ /_ / | / /___ __ __(_)___ _____ _/ /_(_)___ ____ / / / _ \/ /_/ __/ / |/ / __ `/ | / / / __ `/ __ `/ __/ / __ \/ __ \ / /___/ __/ __/ /_ / /| / /_/ /| |/ / / /_/ / /_/ / /_/ / /_/ / / / / /_____/\___/_/ \__/ /_/ |_/\__,_/ |___/_/\__, /\__,_/\__/_/\____/_/ /_/ /____/ {% endcomment %} <ul class="left"> {% for link in site.data.navigation %} {% if link.url contains 'http' %} {% assign domain = '' %} {% elsif link.url == '#' %} {% assign domain = '' %} {% else %} {% assign domain = site.url %} {% endif %} {% comment %} If there are links for left side begin {% endcomment %} {% if link.side == 'left' %} {% comment %} If left side WITHOUT dropdown menu do {% endcomment %} {% if link.dropdown == nil %} <li{% if link.url == page.url %} class="active"{% endif %}><a href="{{ domain }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title }}</a></li> <li class="divider"></li> {% comment %} If left side WITH dropdown menu do {% endcomment %} {% else %} <li class="has-dropdown{% if link.url == page.url %} active{% endif %}"> <a href="{{ domain }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title }}</a> <ul class="dropdown"> {% for dropdown_link in link.dropdown %} {% if dropdown_link.url contains 'http' %} {% assign domain = '' %} {% else %} {% assign domain = site.url %} {% endif %} <li><a href="{{ domain }}{{ dropdown_link.url }}"{% if dropdown_link.url contains 'http' %} target="_blank"{% endif %}>{{ dropdown_link.title }}</a></li> {% endfor %} </ul> </li> <li class="divider"></li> {% endif %} {% endif %} {% endfor %} {% comment %} Second loop finished {% endcomment %} </ul> </section> </nav> </div><!-- /#navigation -->