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 a centred link/logo with CSS?
Creating a navigation bar with a centered link or logo is a common web design pattern. This can be achieved using CSS positioning techniques to place navigation items on the left, center, and right sides of the navigation bar.
Syntax
nav {
position: fixed;
top: 0;
width: 100%;
}
.center-links {
display: inline-block;
margin-left: 50%;
transform: translateX(-50%);
}
Example
The following example creates a fixed navigation bar with links positioned on the left, a centered logo/link, and additional links on the right −
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Navigation Bar</title>
<style>
body {
margin: 0;
margin-top: 60px;
padding: 0;
font-family: Arial, sans-serif;
}
nav {
position: fixed;
top: 0;
width: 100%;
background-color: #fbffc4;
overflow: auto;
height: auto;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.left-links {
display: inline-block;
position: absolute;
left: 0;
}
.right-links {
display: inline-block;
position: absolute;
right: 0;
}
.center-links {
display: inline-block;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.links {
display: inline-block;
text-align: center;
padding: 14px 16px;
color: #000;
text-decoration: none;
font-size: 17px;
font-weight: bold;
transition: border-bottom 0.3s ease;
}
.links:hover {
border-bottom: 2px solid purple;
}
.selected {
border-bottom: 2px solid purple;
}
</style>
</head>
<body>
<nav>
<div class="left-links">
<a class="links" href="#">Login</a>
<a class="links" href="#">Register</a>
</div>
<div class="center-links">
<a class="links selected" href="#">Home</a>
</div>
<div class="right-links">
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">More Info</a>
</div>
</nav>
<h1>Hover on the navigation links above</h1>
</body>
</html>
A fixed navigation bar appears at the top with a light yellow background. "Login" and "Register" links are positioned on the left, "Home" is centered with an active purple underline, and "Contact Us" and "More Info" are on the right. Hovering over any link adds a purple underline with a smooth transition effect.
Key Points
- Use
position: absolutewithleft: 50%andtransform: translateX(-50%)for perfect centering - The
position: fixedproperty keeps the navigation bar at the top during scrolling - Add
margin-topto the body to prevent content from hiding behind the fixed navbar
Conclusion
This approach creates a flexible navigation layout with centered branding while maintaining proper spacing for side navigation items. The CSS positioning technique ensures the center element stays perfectly aligned regardless of content length.
Updated on: 2026-03-15T14:18:03+05:30
467 Views
Advertisements