No media files provided.
Given the following HTML, please try to implement the navigation in CSS to fit both mobile and desktop.
<header id='top'>
<h1>Demo on footer navigation strategy</h1>
</header>
<nav>
<ul class='small-block-grid-4 hide-for-small-only'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Works</a></li>
<li><a href='#'>Contact</a></li>
</ul>
<p class='show-for-small-only'><a href='#footer-nav'>Menu</a></p>
</nav>
<div>
<p>A long text here.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in lacinia arcu. Donec vel sapien eget ante sagittis sagittis nec vitae ligula. Nam nibh felis, vulputate eget sagittis non, rhoncus vitae lacus. Aliquam porta pharetra augue, nec ultrices elit euismod nec. Vivamus in sagittis nisi, non condimentum dolor. Pellentesque mollis, nunc ac imperdiet dignissim, enim lectus porttitor enim, at fermentum ligula magna id lorem. Donec purus mauris, mollis nec quam et, tincidunt ultricies massa. Nam viverra id arcu pharetra mollis. Etiam ac porta ante, quis lacinia tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam venenatis lobortis vestibulum. Donec vel rutrum quam. Cras porta risus placerat, porta tellus nec, auctor velit. Ut sagittis urna in sem pellentesque, sed feugiat ligula dapibus.</p>
<p>Maecenas ac odio sem. Mauris vestibulum ultrices nisl, in aliquam nibh ultricies sed. Integer ac eleifend quam, ac luctus purus. Praesent a turpis vitae urna hendrerit mattis vel mollis odio. Aliquam ac sapien elit. Vivamus in ornare ipsum, non vulputate ante. Praesent adipiscing eros eu odio viverra, sit amet consequat ligula iaculis. Proin congue dolor nec blandit laoreet. Ut pellentesque metus vel pretium porta. Suspendisse faucibus nisi et egestas aliquam. Vivamus sagittis lobortis ipsum, ut accumsan nunc congue in. Maecenas mollis nunc a felis tempus condimentum. Aenean pellentesque neque non purus volutpat pellentesque.</p>
<p>Sed aliquam fringilla lacus, ut ultrices dolor congue lobortis. Praesent tincidunt nulla a est consectetur iaculis. Sed in pretium lacus, mollis mollis erat. Ut at rhoncus dui, sed lacinia nunc. Integer non elementum lectus, at mattis arcu. Nulla sit amet ultricies justo, id ultrices purus. Donec dictum erat eget turpis auctor tristique. Nam sagittis erat et dui aliquam, sed congue dolor vestibulum.</p>
</div>
<footer>
<nav id='footer-nav'>
<ul>
<li><a href='#top'>Top</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Works</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
</footer>
Starting Point: