<nav>

<div class="nav-wrapper">
  {%- assign default_paths = site.pages | map: "path" -%}
  {%- assign page_paths = site.header_pages | default: default_paths -%}
  {%- assign titles_size = site.pages | map: 'title' | join: '' | size -%}
  <a href="{{ "/" | relative_url}}" class="brand-logo">{{ site.title | escape}}</a>

  {%- if titles_size > 0 -%}
  <ul id="nav-mobile" class="right hide-on-med-and-down">
    {%- for path in page_paths -%}
      {%- assign my_page = site.pages | where: "path", path | first -%}
      {%- if my_page.title -%}
        <li><a href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a></li>
      {%- endif -%}
    {%- endfor -%}
    <li><a href="sass.html">Sass</a></li>
    <li><a href="badges.html">Components</a></li>
    <li><a href="collapsible.html">JavaScript</a></li>
  </ul>
  {%- endif -%}
</div>

</nav>