navbar.html

<header class="site-header">
    
    <!-- Logo and title -->
	<div class="branding">
		<a href="{{ site.baseurl }}/">
			<img class="avatar" src="{{ site.baseurl }}/{{ site.theme_settings.avatar }}" alt=""/>
		</a>

		<h1 class="site-title">
			<a href="{{ site.baseurl }}/">{{ site.theme_settings.title }}</a>
		</h1>
	</div>
    
    <!-- Toggle menu -->
    <nav class="clear">
    <a id="pull" class="toggle" href="#">
    <i class="fa fa-bars fa-lg"></i>
    </a>
    
    <!-- Menu -->
    <ul>
        <!-- Auto Generation of NORMAL pages in the navbar -->
        {% for page in site.pages %}
        {% if page.title and page.hide != true %}
        <li class="separator"> | </li>
        <li>
            <a class="clear" href="{{ page.url | relative_url }}">
                {{ page.title }}
            </a>
        </li>
        {% endif %}
        {% endfor %} 
        
        <!-- Auto Generation of SPECIAL pages in the navbar -->
        {% assign special_page = "" %}
        
        {% for item in site.theme_settings.special_page %}
          {% if item[1] %}
            {% assign special_page = item[0] | append: "," | append: special_page %}
          {% endif %}
        {% endfor %}

        {% assign special_page_array = special_page | split: "," %}

        {% for item in special_page_array %}
        <li class="separator"> | </li>
        <li>
            <a class="clear" href="{{ site.url }}{{ site.baseurl }}/search">
                <i class="fa fa-{{ item }}" aria-hidden="true"></i>
            </a>
        </li>
        {% endfor %}
        
    </ul>
        
	</nav>
</header>