<nav role="navigation">
<ul>
<li>
<a href="">Nav Item 1</a>
</li>
<li>
<a href="">Nav Item 2</a>
</li>
<li>
<a href="">Nav Item 3</a>
</li>
<li>
<a href="">Nav Item 4</a>
</li>
<li>
<a href="">Nav Item 5</a>
</li>
</nav>
nav{
background: #111;
padding: 1em;
}
/*
Remove Spacing and list item bullet
styles
*/
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
/*
Add Space between navigation list styles
*/
nav li{
margin: 10px 0;
text-align: center;
}
nav a{
color: #fff;
margin: 0 10px;
}
/*
Remove Spacing and list item bullet
styles
*/
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
/*
Once there's enough room for all the navigation items, make the list items display inline.
*/
@media screen and (min-width: 525px){
nav li{
display: inline;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.