Create a Navigation Bar with HTML and CSS: Simple and Elegant
Mike Codeur
A navigation bar is an essential element for any website. Whether you're a beginner or looking to refine your skills, this article will guide you in creating a simple, elegant, and responsive navigation bar.
Building the Navigation Bar with HTML
Start by structuring the navigation bar with basic HTML. Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar">
<div class="logo">MySite</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</body>
</html>
Code Explanation:
- The navigation bar is contained within a
<nav>
tag. - The logo is a simple
div
. - Navigation links are grouped in an unordered list (
<ul>
). - A hamburger icon is added for the responsive menu.
Styling with CSS
Create a styles.css
file and add the following styles to make the navigation bar visually appealing.
body {
margin: 0;
font-family: Arial, sans-serif;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 0.5em 1em;
color: white;
}
.nav-links {
list-style: none;
display: flex;
gap: 1em;
margin: 0;
}
.nav-links a {
text-decoration: none;
color: white;
transition: color 0.3s;
}
.nav-links a:hover {
color: #00bcd4;
}
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
}
.hamburger span {
width: 25px;
height: 3px;
background-color: white;
}
CSS Explanation:
- The navigation bar is styled with
display: flex
for a horizontal layout. - Links have a hover effect that changes their color.
- The hamburger icon is styled but remains hidden on larger screens.
Adding a Responsive Menu
To make the navigation bar adapt to smaller screens, add these styles to the CSS file:
@media (max-width: 768px) {
.nav-links {
display: none;
flex-direction: column;
background-color: #333;
position: absolute;
top: 50px;
right: 0;
width: 100%;
}
.nav-links.active {
display: flex;
}
.hamburger {
display: flex;
}
}
Then, add some JavaScript to activate the hamburger menu:
<script>
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
</script>
Explanation:
- The responsive styles hide the navigation links by default on smaller screens.
- JavaScript toggles an
.active
class to display the menu when the hamburger icon is clicked.
Conclusion
With these simple steps, you have created a navigation bar that is both elegant and functional. It adapts to all devices and offers a seamless user experience. Get started and customize it to fit your needs!