Responsive Navigation Menu

* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
/* common ul style */
nav ul {
list-style: none;
padding: 0;
margin: 0;
background-color: #444;
}
/* positioning for vertical menu */
nav a {
text-align: center;
display: block;
}
/* common text style */
nav a {
font-family: sans-serif;
font-size: 1.2rem;
/* vertically center */
height: 3rem;
/* vertically center */
line-height: 3rem;
/* remove underline */
text-decoration: none;
color: #fff;
}
nav a.active {
background-color: #eee;
color: #444;
cursor: default;
}
@media (min-width: 768px) {    /* center the menu */
nav {
width: 80%;
margin: 0 auto;
}
nav ul {
/* step 4 */
text-align: center;
/* step 5 */
overflow: auto;
}
nav li {
/* step 1 */
float: left;
/* step 3 */
width: 20%;
}
nav a {
/* step 2 */
display: block;
}
nav a:hover {
background-color: #005f5f;
}
}

--

--

--

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
Chun Ming Wang

Chun Ming Wang

More from Medium

Using Custom Cursors with Javascript for a Better User Experience

Backend Development Key Technologies and Features

How to add google map API to your website & Fix google map API Errors

How to add google map API to your website & Fix google map API Errors

Google Map API