<nav class=“navbar navbar-dark navbar-expand-md fixed-top {% if page.header or page.is_post %}bg-faded{% endif %}” data-toggle=“affix”>

<div class="container">
    <a class="navbar-brand" href="{{"/" | prepend: site.baseurl }}">
        {% if site.brand_logo %}
            <img class="navbar-brand" src="{{site.brand_logo | prepend: site.baseurl }}" alt="{{site.title}}">
        {% else %}
            {{site.title}}
        {% endif %} 
    </a>
    <button class="navbar-toggler hidden-sm-up pull-xs-right collapsed" type="button" data-toggle="collapse"
        data-target="#collapsingNavbar">
        <span class="icon-bar top-bar"></span>
        <span class="icon-bar middle-bar"></span>
        <span class="icon-bar bottom-bar"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsingNavbar">
        <ul class="nav navbar-nav ml-auto">
            {% for section in site.data.nav %}
                {% if section.items %}
                    <li class="nav-item dropdown">
                        <a class="nav-link text-white dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
                            aria-expanded="false">
                            {{section.title}}
                        </a>
                        <div class="dropdown-menu animated fast" aria-labelledby="Preview">
                            {% for sub_section in section.items %}
                                <a class="dropdown-item text-center text-md-left" href="{{sub_section.url | prepend: site.baseurl }}">{{sub_section.title}}</a>
                            {% endfor %}
                        </div>
                    </li>
                {% else %}
                    <li class="nav-item">
                        <a class="nav-link text-white" href="{{section.url | prepend: site.baseurl }}">{{section.title}}</a>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
    </div>
</div>

</nav>