<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">

<div class="container-fluid">

<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

</div>

<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse" id="main-navbar">

<ul class="nav navbar-nav navbar-right">

<li>

<a class="page-scroll" href="#about">About</a>

</li>

<li>

<a class="page-scroll" href="#upcoming">Upcoming Events</a>

</li>

<li>

<a class="page-scroll" href="#past">Past Events</a>

</li>

<li role="presentation" class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Participant protips <span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a class="page-scroll" href="#leads">For project leads</a></li>

<li><a class="page-scroll" href="#contributors">For contributors</a></li>

</ul>

</li>

<li>

<a class="page-scroll" href="#coc">Code of Conduct</a>

</li>

<li>

<a id="nav-twitter" rel="noopener" target="_blank" class="page-scroll" href="https://twitter.com/{{site.twitter_username}}"><i class="fa fa-twitter"></i></a>

</li>

<li>

<a id="nav-github" rel="noopener" target="_blank" class="page-scroll" href="{{site.github_url}}"><i class="fa fa-github"></i></a>

</li>

<li>

<a id="nav-youtube" rel="noopener" target="_blank" class="page-scroll" href="{{site.youtube_channel}}"><i class="fa fa-youtube"></i></a>

</li>

</ul>

</div>

<!-- /.navbar-collapse -->

</div>

<!-- /.container-fluid -->

</nav>