Simple CSS Vertical Navigation Menu

  1. The menu is a vertical menu on small screens.
  2. The menu is a horizontal navigation bar on large screens.
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
* {
box-sizing: border-box;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
background-color: #444;
}
nav li {
font-family: sans-serif;
font-size: 1.2rem;
line-height: 3rem;
height: 3rem;
}
nav a {
text-decoration: none;
text-align: center;
color: #555;
display: block;
}
nav a:hover {
background-color: #9AA0A2;
}
nav a.active {
background-color: #84878E;
color: #444;
cursor: default;
}

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store