HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Learn how to create a navigation bar with equal-width navigation links
Step 1) Add HTML:
<!-- The navigation menu -->
<div class="navbar">
<a class="active" href="#">Home</a>
<a href="#">Search</a>
<a href="#">Contact</a>
<a href="#">Login</a>
</div>
Step 2) Add CSS:
/* Style the navigation menu */
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
/* Navigation links */
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 25%; /* Four equal-width links. If you have two links, use 50%, and
33.33% for three links, etc.. */
text-align: center; /* If you want
the text to be centered */
}
/* Add a background color on mouse-over
*/
.navbar a:hover {
background-color: #000;
}
/* Style the current/active link */
.navbar a.active {
background-color: #04AA6D;
}
/* Add
responsiveness - on screens less than 500px, make the navigation links appear
on top of each other, instead of next to each other */
@media screen and
(max-width: 500px) {
.navbar a {
float: none;
display: block;
width: 100%;
text-align: left; /* If you want the text to be left-aligned on small screens
*/
}
}
Try it Yourself »