<!– Navigation –> <nav class=“navbar navbar-default navbar-custom navbar-fixed-top”>

<div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="{{ site.baseurl }}/">{{ site.title }}</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div id="huxblog_navbar">
        <div class="navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="{{ site.baseurl }}/">Home</a>
                </li>
                {% for page in site.pages %}{% if page.title %}
                <li>
                    <a href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
                </li>
                {% endif %}{% endfor %}
            </ul>
        </div>
    </div>
    <!-- /.navbar-collapse -->
</div>
<!-- /.container -->

</nav> <script>

// Drop Bootstarp low-performance Navbar
// Use customize navbar with high-quality material design animation
// in high-perf jank-free CSS3 implementation
var $body   = document.body;
var $toggle = document.querySelector('.navbar-toggle');
var $navbar = document.querySelector('#huxblog_navbar');
var $collapse = document.querySelector('.navbar-collapse');
var __HuxNav__ = {
    close: function(){
        $navbar.className = " ";
        // wait until animation end.
        setTimeout(function(){
            // prevent frequently toggle
            if($navbar.className.indexOf('in') < 0) {
                $collapse.style.height = "0px"
            }
        },400)
    },
    open: function(){
        $collapse.style.height = "auto"
        $navbar.className += " in";
    }
}
// Bind Event
$toggle.addEventListener('click', function(e){
    if ($navbar.className.indexOf('in') > 0) {
        __HuxNav__.close()
    }else{
        __HuxNav__.open()
    }
})
/**
 * Since Fastclick is used to delegate 'touchstart' globally
 * to hack 300ms delay in iOS by performing a fake 'click',
 * Using 'e.stopPropagation' to stop 'touchstart' event from 
 * $toggle/$collapse will break global delegation.
 * 
 * Instead, we use a 'e.target' filter to prevent handler
 * added to document close HuxNav.  
 *
 * Also, we use 'click' instead of 'touchstart' as compromise
 */
document.addEventListener('click', function(e){
    if(e.target == $toggle) return;
    if(e.target.className == 'icon-bar') return;
    __HuxNav__.close();
})

</script>