Responsive Menu Example 2: Flexbox

Example

Be sure to resize the page!

HTML

<div class="samplenav">
    <a href="">INFS 205</a>
    <a href="">INFS 310</a>
    <a href="">INFS 315</a>
    <a href="">INFS 361</a>
    <a href="">INFS 420</a>
    <a href="">INFS 490</a>
    <a href="">INFS 491</a>
</div>

CSS

/*create the flexbox and set direction for small device*/
    .samplenav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

/*format the anchor statement and add some padding; these are flexbox items*/
.samplenav a {
    padding: 10px;
    flex-grow: 0;
    flex-shrink: 0;
    text-decoration: none;
    text-align: center;
}

/*add a media query to convert the menu from vertical to horizontal when the viewport is 800px or wider*/
    @media (min-width: 800px) {
    .samplenav {
    flex-direction: row;
    }
}

/* add the interactive appearance */

.samplenav a:link {
color: blue;
background-color: white;
}

.samplenav a:visited {
color: blue;
background-color: white;
}

.samplenav a:focus {
    color: white;
    background-color: blue;
}

.samplenav a:hover {
    color: white;
    background-color: blue;
}

.samplenav a:active {
    color: white;
    background-color: blue;
}