<nav>
  <div class="nav-wrapper"><a href="#" class="brand-logo"><%= config.title %></a> <a href="#" data-activates="mobile-nav" class="button-collapse"><i class="material-icons">menu</i></a>
    <!-- MENU FOR BIG SCREENS -->
    <ul class="right hide-on-med-and-down">
    <% if (theme.menu){ %>
      <% for (var i in theme.menu){ %>
        <li><a class="main-nav-link" href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
      <% } %>
      <!-- <li><a href="#about-container">About</a>
      </li>
      <li><a href="#!" data-activates="dropdown1" class="dropdown-button">My Work<i class="material-icons right">arrow_drop_down</i></a>
        <ul id="dropdown1" class="dropdown-content">
          <li><a href="#fullstack-container">Full-stack</a>
          </li>
          <li><a href="#frontend-container">Front-End</a>
          </li>
        </ul>
      </li>
      <li><a href="#about-container">Blog</a>
      </li>
      <li class="active"><a href="#about-container">Dev Notes</a>
      </li>
       -->
       <li><a href="#!" class="dropdown-button"><i class="material-icons">search</i></a>
      </li>
     <% } %>
    </ul>
     <!--MENU FOR MED AN SMALL SCREENS-->
    <ul id="mobile-nav" class="side-nav" style="transform: translateX(-100%);">
      <li><a href="#about-container">About</a>
      </li>
      <li><a href="blog.fabiangutierrez.co">Blog</a>
      </li>
    </ul>
  </div>
</nav>