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 bottom of the web pagenwith CSS
To set the navigation bar at the bottom of the web page, use the position: fixed property combined with bottom: 0. This creates a sticky navigation bar that remains visible at the bottom of the viewport even when the user scrolls through the page content.
Syntax
nav {
position: fixed;
bottom: 0;
width: 100%;
}
Example
The following example demonstrates how to create a fixed bottom navigation bar −
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
position: fixed;
bottom: 0;
width: 100%;
margin: 0;
padding: 0;
background-color: orange;
}
li {
float: left;
border-right: 1px solid white;
}
li a {
display: block;
padding: 8px 16px;
background-color: orange;
color: white;
text-decoration: none;
}
li a:hover {
background-color: #ff8c00;
}
li:last-child {
border-right: none;
}
div {
padding: 20px;
margin-bottom: 60px;
background-color: #f4f4f4;
height: 1000px;
}
</style>
</head>
<body>
<div>
<h1>Page Content</h1>
<p>This is demo content to demonstrate the fixed bottom navigation.</p>
<p>Scroll down to see how the navigation bar stays at the bottom.</p>
<p>Adding more content to make the page scrollable...</p>
<p>The navigation bar will remain visible at the bottom of the viewport.</p>
<p>This creates a persistent navigation experience for users.</p>
<p>Continue scrolling to test the fixed positioning effect.</p>
</div>
<ul>
<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>
</body>
</html>
A webpage displays with content in a light gray area and an orange navigation bar fixed at the bottom. The navigation contains four links (Home, News, Contact, About) with white borders between them. When scrolling through the tall content, the navigation bar remains anchored to the bottom of the browser window.
Key Properties
| Property | Value | Purpose |
|---|---|---|
position |
fixed |
Removes element from normal flow and positions relative to viewport |
bottom |
0 |
Anchors the element to the bottom edge of the viewport |
width |
100% |
Makes the navigation span the full width of the screen |
Conclusion
Using position: fixed with bottom: 0 creates a persistent bottom navigation bar that stays visible during scrolling. Remember to add bottom margin to your main content to prevent overlap with the fixed navigation.
Updated on: 2026-03-15T12:29:55+05:30
4K+ Views
Advertisements