Big footer nav

[joshuaogle]

Screenshot: http://www.flickr.com/photos/andreweick/11674724836

Make sure it collapses well on mobile

[andreweick]

For what it's worth, this is the markup I used to use.

<div id="footer-eick">
  <h3 class="icon-wingding">Andy Eick</h3>
  <ul>
    <li>
      <a class="ss-home" href="{{ root_url }}">Home</a>
    </li>
    <li>
      <a class="ss-contacts" href="{{ root_url }}/about">About</a>
    </li>
    <li>
      <a class="ss-userframe" href="http://justmissedhim.com">Portfolio</a>
    </li>
  </ul>
  <ul>
    <li>
      <a class="ss-mailbox" href="{{ root_url }}/contact">Contact</a>
    </li>
    <li>
      <a class="ss-buildings" href="http://missionfocus.com/">My Company</a>
    </li>
    <li>
      <a class="ss-bank" href="http://imintel.org">My Institute</a>
    </li>
  </ul>
</div>

<div id="footer-pages">
  <h3 class="ss-script">Pages</h3>
  <ul>
    <li>
      <a class="ss-userportrait" href="{{ root_url }}/photogrid">Photo Grid</a>
    </li>
    <li>
      <a class="ss-books" href="{{ root_url }}/bookshelf/index.html">Bookshelf</a>
    </li>
    <li>
      <a class="ss-dog" href="http://soccer-peeps.com">Jasmine's soccer</a>
    </li>
  </ul>
</div>

<div id="footer-archives">
  <h3 class="ss-clock">Archives</h3>
  <ul>
    <li>
      <a class="ss-inbox" href="{{ root_url }}/blog/archives">View All Posts</a>
    </li>
    <li>
      <a class="ss-newspaper" href="{{ root_url }}/categories">Categories</a>
    </li>
    <li>
      <a class="ss-video" href="{{ root_url }}/blog/categories/video">Videos</a>
    </li>
  </ul>
</div>

<div id="footer-subscribe">
  <h3 class="ss-rss">Subscribe</h3>
  <ul>
    <li>
      <a class="ss-rss" href="{{ site.subscribe_rss }}">Subscribe via RSS</a>
    </li>
    {% if site.subscribe_email %}
      <li>
        <a class="ss-mail" href="{{ site.subscribe_email }}">Subscribe via Email</a>
      </li>
    {% endif %}
  </ul>
</div>

<div id="footer-copyright">
  <p>&copy; 1999-{{ site.time | date: "%Y" }} - <a href="{{ root_url }}/about/">{{ site.author }}</a>. All rights reserved.</p>
  <p>{{ site.posts.size }} entries, last update: {{ site.time }} </p>
  <p>{{ site.subtitle }}</p>
  <p>{{ site.description }}</p>
</div>

[joshuaogle]

I updated the footer so it is a mix of the old and new styles. The wood looks great with the simple light content area too. It doesn't have the icons, because that's a lot of custom images and I wanted to see what you thought of it this way first. I rearranged a little to reflect the new structure, but feel free to put those however you like.

Desktop:

Mobile:

[andreweick]

Ok, do you really like the wood or are you just saying that because I'm the client :-)

Could we try a version w/o wood? It doesn't seem to have pop (the text blends in) and now I think the wood is jarring against rest of site layout.

[joshuaogle]

I really do like the wood, actually. I think it looks nice to have a little natural and warm texture against the cool flat whites. But a dark gray with a subtle texture or a flat color would look nice too.

[andreweick]

Ok -- lets leave the wood -- I trust your sense of more than mine! :+1: