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
Set the navigation bar to stay at the top of the web page with CSS
To set the navigation bar at the top of the web page, use the position: fixed property combined with top: 0. This creates a fixed navigation bar that remains visible at the top even when users scroll down the page.
Syntax
.navbar {
position: fixed;
top: 0;
width: 100%;
}
Example
The following example creates a horizontal navigation menu that stays fixed at the top of the page −
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
position: fixed;
top: 0;
width: 100%;
background-color: #333;
z-index: 1000;
}
.navbar li {
float: left;
border-right: 1px solid #555;
}
.navbar li a {
display: block;
color: white;
text-decoration: none;
padding: 15px 20px;
transition: background-color 0.3s;
}
.navbar li a:hover {
background-color: #555;
}
.navbar li:last-child {
border-right: none;
}
.content {
margin-top: 60px;
padding: 20px;
line-height: 1.6;
}
</style>
</head>
<body>
<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div class="content">
<h2>Main Content</h2>
<p>This is the main content area. Scroll down to see how the navigation bar stays fixed at the top.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.</p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.</p>
</div>
</body>
</html>
A dark navigation bar with white text appears fixed at the top of the page. The navigation contains Home, News, Contact, and About links with hover effects. The main content area has proper spacing from the top to avoid overlapping with the fixed navbar.
Key Points
- position: fixed − Removes the element from normal document flow and positions it relative to the viewport
- top: 0 − Positions the navbar at the very top of the viewport
- width: 100% − Makes the navbar span the full width of the screen
- z-index − Ensures the navbar appears above other content
- margin-top on content − Prevents content from being hidden behind the fixed navbar
Conclusion
Using position: fixed with top: 0 creates an effective fixed navigation bar. Remember to add appropriate margin to your main content to prevent overlap with the fixed navbar.
Updated on: 2026-03-15T12:29:38+05:30
358 Views
Advertisements