Flexible Flex Nav

/*HTML*/ <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">Bio</a></li> <li><a href="#">Music</a></li> <li><a href="#">Shows</a></li> </ul> /*CSS*/ .nav { list-style: none; margin: 0; background: #8F2426; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: flex-end; } .nav a { text-decoration: none; display: block; padding: 1em; color: white; } .nav li:first-child { margin-right: auto; } .nav a:hover { background: lighten(#5F1012, 20%); } @media (max-width: 800px) { .nav { justify-content: space-around; } .nav li:first-child { margin-right: 0; } } @media (max-width: 600px) { .nav { -webkit-flex-flow: column wrap; flex-flow: column wrap; padding: 0; } .nav a { text-align: center; padding: 10px; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.1); } .nav li:last-of-type a { border-bottom: none; } }

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.