jcottrell · February 2, 2016 12:00
diff --git a/nav-switching.html b/nav-switching.html
 <!DOCTYPE HTML>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Nav Switching</title>
    <style>
        * { margin:0; padding:0;}
        nav { margin:20px; }
        ul { display:flex; justify-content:space-around; }
        ul li { min-width: 100px; display:inline-block; }
        /* the important pieces for hiding/viewing the text and images is below */
        ul li a span { display:none; }
        ul li a img { display:block;width:100px;height:100px; }
        @media screen and (min-width:600px) {
            ul li a span { display:block; }
            ul li a img { display:none; }
        }
    </style>
 </head>
 <body>
    <nav>
        <ul>
            <li>
                <a href="#coffee1"><span>Mug</span><img src="https://upload.wikimedia.org/wikipedia/commons/4/45/A_small_cup_of_coffee.JPG" alt="mug" /></a>
            </li>
            <li>
                <a href="#coffee2"><span>Beans</span><img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Roasted_Coffee_Beans_Texture.jpg" alt="beans" /></a>
            </li>
            <li>
                <a href="#coffee3"><span>Icon</span><img src="http://res.freestockphotos.biz/pictures/16/16192-illustration-of-a-hot-cup-of-coffee-pv.png" alt="icon" /></a>
            </li>
        </ul>
    </nav>
 </body>
 </html>