Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a navigation bar with equal-width navigation links with CSS?
Creating a navigation bar with equal-width navigation links ensures that each menu item takes up the same amount of space, providing a balanced and professional appearance. This can be achieved using CSS properties like width with viewport units or flexbox.
Syntax
/* Method 1: Using viewport width */
.nav-link {
width: calc(100% / number-of-links);
}
/* Method 2: Using flexbox */
.nav-container {
display: flex;
}
.nav-link {
flex: 1;
}
Method 1: Using Viewport Width
The following example creates a navigation bar where each link takes exactly 20% of the viewport width (100% ÷ 5 links = 20vw) −
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Equal Width Navigation</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin-top: 60px;
font-family: Arial, sans-serif;
}
nav {
position: fixed;
top: 0;
width: 100%;
background-color: #272727;
overflow: hidden;
}
.links {
width: 20vw;
padding: 17px;
display: inline-block;
text-align: center;
color: #b289fd;
text-decoration: none;
font-size: 17px;
transition: background-color 0.3s;
}
.links:hover {
background-color: #646464;
}
.selected {
background-color: #00122b;
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#">Home</a>
<a class="links" href="#">Login</a>
<a class="links" href="#">Register</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">More Info</a>
</nav>
<h1>Equal Width Navigation Menu</h1>
<p>This navigation bar uses viewport width to ensure each link has equal spacing.</p>
</body>
</html>
A fixed navigation bar with five equal-width links appears at the top. Each link takes exactly 20% of the screen width with a dark background, purple text, and hover effects. The "Home" link is highlighted with a darker background.
Method 2: Using Flexbox
A more modern and flexible approach uses CSS flexbox to automatically distribute equal space among navigation links −
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Equal Width Navigation</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
nav {
background-color: #2c3e50;
display: flex;
}
.nav-link {
flex: 1;
padding: 15px;
text-align: center;
color: white;
text-decoration: none;
border-right: 1px solid #34495e;
transition: background-color 0.3s;
}
.nav-link:last-child {
border-right: none;
}
.nav-link:hover {
background-color: #34495e;
}
.nav-link.active {
background-color: #3498db;
}
</style>
</head>
<body>
<nav>
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Contact</a>
</nav>
<div style="padding: 20px;">
<h1>Flexbox Navigation Example</h1>
<p>This navigation automatically adjusts link widths based on available space.</p>
</div>
</body>
</html>
A responsive navigation bar with four equal-width links using flexbox. Each link automatically adjusts its width based on available space. The "Home" link is highlighted in blue, and subtle borders separate each navigation item.
Key Points
-
Viewport width method: Use
width: Xvwwhere X = 100 ÷ number of links -
Flexbox method: Use
display: flexon container andflex: 1on links - Responsive design: Flexbox automatically adapts to screen size changes
- Accessibility: Always include hover effects and proper contrast ratios
Conclusion
Both viewport width and flexbox methods create equal-width navigation links effectively. Flexbox is generally preferred for its flexibility and automatic responsiveness, while viewport width offers precise control over link dimensions.
Updated on: 2026-03-15T14:18:26+05:30
1K+ Views
Advertisements