CSS Navigation Bar
What is a CSS Navigation Bar?
A CSS Navigation Bar is a menu that helps users move from one webpage to another. It is created using HTML elements such as <nav>, <ul>, <li>, and <a>, while CSS is used to control its layout, colors, spacing, hover effects, and responsive design. Navigation bars are one of the most important parts of every website.
Why Use a CSS Navigation Bar?
A navigation bar improves website usability by providing quick access to important pages. CSS makes navigation menus visually attractive, easy to use, and responsive across different devices. Modern navigation bars often include hover effects, active links, and horizontal or vertical layouts.
Basic Navigation Structure
<!DOCTYPE html>
<html>
<head>
<style>
nav{
background:#007BFF;
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
</nav>
</body>
</html>Step 1: Create Navigation Links
First, create a navigation bar using the <nav> element and add links inside it.
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</body>
</html>Step 2: Style the Navigation Bar
Use CSS to add background color, spacing, and remove the default underline from links.
<!DOCTYPE html>
<html>
<head>
<style>
nav{
background:#007BFF;
padding:15px;
}
nav a{
color:white;
text-decoration:none;
margin-right:20px;
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</body>
</html>Step 3: Add Hover Effects
The :hover pseudo-class changes the appearance of links when the mouse pointer moves over them.
<!DOCTYPE html>
<html>
<head>
<style>
nav{
background:#222;
padding:15px;
}
nav a{
color:white;
text-decoration:none;
padding:10px 15px;
}
nav a:hover{
background:#007BFF;
border-radius:5px;
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">Blog</a>
<a href="#">Gallery</a>
<a href="#">Contact</a>
</nav>
</body>
</html>Step 4: Highlight the Active Link
Use a class to highlight the current page in the navigation bar.
<!DOCTYPE html>
<html>
<head>
<style>
nav{
background:#333;
padding:15px;
}
nav a{
color:white;
text-decoration:none;
padding:10px 15px;
}
.active{
background:#28a745;
border-radius:5px;
}
</style>
</head>
<body>
<nav>
<a class="active" href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</body>
</html>Step 5: Create a Flexbox Navigation Bar
Flexbox is the recommended way to create modern horizontal navigation bars because it provides better alignment and responsiveness.
<!DOCTYPE html>
<html>
<head>
<style>
nav{
display:flex;
justify-content:center;
gap:20px;
background:#007BFF;
padding:15px;
}
nav a{
color:white;
text-decoration:none;
font-weight:bold;
}
nav a:hover{
text-decoration:underline;
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">Products</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</body>
</html>Complete CSS Navigation Bar Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
margin:0;
font-family:Arial;
}
nav{
display:flex;
justify-content:center;
background:#222;
padding:15px;
}
nav a{
color:white;
text-decoration:none;
padding:12px 20px;
margin:0 5px;
border-radius:5px;
transition:0.3s;
}
nav a:hover{
background:#007BFF;
}
.active{
background:#28a745;
}
</style>
</head>
<body>
<nav>
<a class="active" href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Gallery</a>
<a href="#">Contact</a>
</nav>
</body>
</html>Advantages of CSS Navigation Bar
Best Practices
- Use semantic <nav> elements for navigation menus.
- Use Flexbox to create responsive navigation bars.
- Highlight the active page using a separate CSS class.
- Add hover effects to improve user interaction.
- Keep enough spacing between navigation links.
- Choose colors with good contrast for readability.
- Make navigation easy to use on both desktop and mobile devices.
- Keep the navigation layout clean and consistent throughout the website.
Web Resources on CSS Navigation Bar
1. MDN Web Docs : <nav> HTML navigation section element
2. MDN Web Docs : Creating an irregular nav menu with border-shape
3. Dev.to : How to Create a Navigation Bar Using HTML and CSS
4. Dev.to : Create a Simple Navbar with 7 Lines of CSS
🧪 Test Your CSS Code
Edit the CSS code on the left and click “Run Code” to see the result on the right.
Click “Run Code” to see the result here.