<nav id="dot-nav">
  <ul>
    {% for item in site.data.navigation %}
    <li class="dot-container">
      <a href="#{{item.section}}-section" data-number="{{item.number}}">
        <span class="dot"></span>
        <span class="dot-label">{{item.title}}</span>
      </a>
    </li>
    {% endfor %}
  </ul>
</nav>
<div id="toggle" class="container">
  <span class="line top"></span>
  <span class="line middle"></span>
  <span class="line bottom"></span>
</div>
<div id="overlay" class="overlay">
  <div class="logo"><img class="logo-img" src="img/logo-white.png" alt=""><span>Brittany Chiang</span></div>
  <nav class="overlay-menu">
    <ul class="menu-container">
      {% for item in site.data.navigation %}
      <li class="menu-item"><a href="#{{item.section}}-section">{{item.title}}</a></li>
      {% endfor %}
    </ul>
  </nav>
</div>
