How to Create a Sticky Horizontal Navigation Bar with CSS
Navigation
How To, for Web Applications
By: Chrysanthus Date Published: 14 Mar 2025
Imagine that there is a Horizontal Navigation Bar below some content in a webpage. As the web page is scrolled down, the bar is moving up until it becomes affix at the top of the body of the webpage. This tutorial explains how to code that, a sticky Horizontal Navigation Bar with CSS. When the webpage is scrolled back up, the bar will finally come down a bit to remain at its designated position.
At the end of this tutorial is the complete webpage code. The reader should copy the complete webpage code into a text editor. Save the file with any name with the extension, .html . Open the file in the browser. Scroll down and then scroll up to appreciate the effect. The reader is advised to do that before continuing to read this tutorial.
The Principal CSS Rule
Let the horizontal navigation bar be made sticky, at the top of the containing element. For the example of this tutorial, the navigation bar is an HTML div element, and the containing element is the HTML body element. The CSS rule for the div bar is:
#navbar {
position: sticky;
top: 0;
overflow: hidden;
background-color: #333;
}
where "navbar" is the ID of the HTML div element that contains the hyperlinks. The CSS properties here that deal with "stickying" when scrolling down or when scrolling up (bringing back to original position), are "position: sticky;" and "top: 0;" . The "position: sticky;" property effectively gives the bar div element, a z-index of 1, assuming that the HTML body and its normal divs are at z-index 0.
The "top: 0;" property becomes effective, after scrolling down has begun and the horizontal navigation bar div is at the top of the HTML body element. That is when it sticks, and does not go up any further.
It has to happen like this because some short content is coded above the bar, in the HTML document body, forcing the bar below the top of the body element. So when the bar reaches the top of the body element, it gets stuck. When scrolling up, the bar will go down slightly (because of the small content coded above it) to its original forced position.
The Complete Webpage Code
It is assume that the reader understands the meaning and use of the rest of the HTML tags and coding, that are given in the complete code below, but have not been explained above.
And there you have it: the complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Sticky Horizontal Navigation Bar</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
body {
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}
div.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
#navbar {
position: sticky;
top: 0;
overflow: hidden;
background-color: #333;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: #04AA6D;
color: white;
}
div.mainContent {
padding:15px 15px 2500px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<div id="navbar">
<a class="active" href="javascript:void(0)">Home</a>
<a href="javascript:void(0)">News</a>
<a href="javascript:void(0)">Contact</a>
</div>
<div class="mainContent">
<h3>Sticky Navigation Example</h3>
<p>The navbar will stick to the top when you reach its scroll position.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>
The reader should copy the complete webpage code into a text editor.
Save the file with any name with the extension, .html . Open the file
in the browser. Scroll down and then scroll up to appreciate the
effect.
Chrys
Related Links:
More Related Links:
Cousins
Menus
How to Create a Menu Icon with HTML and CSS and without using a LibraryHow To Create a Top Navigation Bar
How to Create Fixed Auto Height Sidebar Menu with CSS
How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
How to Create a Search Menu to Filter List Items, using CSS and JavaScript
How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
How to Create a Top Fixed Horizontal Menu with CSS
How to Create a Vertical Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
How to Create a Slide Down Full Screen Curtain Navigation Menu
How To Create a Responsive Collapsible Sidebar Menu
Images
Coming soon . . .Buttons
Coming soon . . .Forms
Coming soon . . .Filters
Coming soon . . .Tables
Coming soon . . .BACK NEXT