Denne VIRKER på mobilen!
.nav ul { list-style: none; background-color: #444; text-align: center; padding: 0; margin: 0; } .nav li { font-family: 'Oswald', sans-serif; font-size: 1.2em; line-height: 40px; height: 40px; border-bottom: 1px solid #888; } .nav a { text-decoration: none; color: #fff; display: block; transition: .3s background-color; } .nav a:hover { background-color: #005f5f; } .nav a.active { background-color: #fff; color: #444; cursor: default; } @media screen and (min-width: 600px) { .nav li { width: 120px; border-bottom: none; height: 50px; line-height: 50px; font-size: 1.4em; } /* Option 1 - Display Inline */ .nav li { display: inline-block; margin-right: -4px; }
<div class="nav"> <ul> <li class="home"><a href="#">Home</a></li> <li class="tutorials"><a class="active" href="#">Tutorials</a></li> <li class="about"><a href="#">About</a></li> <li class="news"><a href="#">Newsletter</a></li> <li class="contact"><a href="#">Contact</a></li> </ul> </div>