How to Create a Top Fixed Horizontal Menu with CSS
Fixed Menu
How To, for Web Applications
By: Chrysanthus Date Published: 30 Mar 2025
This tutorial explains How to Create a Top Fixed Horizontal Menu with CSS. The menu consists of hyperlinks with few of the hyperlink features, since this is a teaching exercise. Do not confuse between fixed horizontal menu and sticky horizontal menu. Fixed horizontal menu is menu that does not shake as the webpage is scrolled down and up. With sticky horizontal menu, as the webpage is scrolled down, the menu will be going up until it would get stuck at a particular position; also, as the webpage is scrolled up, the menu will come down to its original position when the scrolling ends. This tutorial is on fixed menu.
The complete code for the fixed menu is given at the end of the this tutorial. The reader should copy the code into a text editor. Save the file with any name, but with the extension, .html . Open the file in the browser. Scroll down and up to see the menu remain fixed. The reader is advised to do that before continuing to read the rest of this tutorial.
The Webpage Skelton Code
The webpage skeleton code to which more important code will be added is:
<!DOCTYPE html>
<html>
<head>
<title>Top Fixed Menu</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>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
Any modern responsible webpage should have at least the first four tags in the HTML head element above. There will be a lot of code in the HTML style element. The HTML script element will have no code, for this project. For this basic example, the HTML body element will have two div elements. The first one will be for the fixed menu and the second one will be for the main document content.
Content for the HTML Body Element
The body content is:
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
<h1>Fixed Top Menu</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
|
|
|
</div>
The first div element is for the menu. Its class-name is "navbar". It has three hyperlinks. The anchor element is the code for the hyperlink. So anchor element means hyperlink, from a technical point of view. The second div is for the main document content. Its class-name is "main".
Strategy
There is a CSS property called position. One of the values is "fixed". There is another CSS property called top. This takes any integer value. In order to have the menu, fixed at the top of the webpage, assign the CSS property, position to the menu div bar with the value "fixed", and assign the CSS property, top to the menu div bar with the value 0px. That is the main thing to do.
Styling the Elements
The elements to style are the body, two divs, and the anchor elements.
Styling the Body Element
The CSS rule for the HTML body element is:
body {margin:0;}
There is zero gap for all the four margins. With that, the left edge of the menu div bar will align with the left edge of the webpage; its top edge will align with the top edge of the webpage; and its right edge will align with the right edge of the webpage.
Styling the Menu div Bar
The CSS rule for the menu div bar is:
div.navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
The background color is #333 (black, but not the blackest black). Notice the presence of the "position: fixed;" property and the "top: 0;" property. The "top: 0;" property has to be typed after the "position: fixed;" property in the same CSS rule. With these two properties, the menu div bar will remain fixed, as the webpage is scrolled. The width of the menu div bar is 100%, meaning it will extend from the left end of the webpage to the right end of the webpage.
Styling the Anchor Elements in the Menu div Bar
The CSS rule for these anchor elements is:
div.navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
font-size: 17px;
text-decoration: none;
}
Each of the three anchor elements (hyperlinks) is floated left. If they are not floated left or right, the top and bottom padding heights will not show, at the browser. That is, the anchor elements will be short in height. The color of text is #f2f2f2 (white, but not the fullest white). The text in each anchor element is centered horizontally, within its rectangle. The top and bottom padding is 14px, and the left and right padding is 17px. The font size of each character in an anchor element is 17px. No anchor element should be underlined; hence, "text-decoration: none;" .
Styling the Main div
The CSS rule for the div for the main document of the webpage is:
div.main {
padding: 16px;
margin-top: 30px;
height: 1500px; /* Used in this example to enable scrolling */
}
Padding all round is 16px. Do not forget that padding is the gap between content and the border. Since the gap for the four margins is zero, there is need for this padding, so that text does not begin or end at the edges of the webpage. In order to have some reasonable gap between the menu bar and the main content, a top-margin for the main div of 30px is provided. The height of the main div is usually not given. It is given here, and very long, to enable scrolling of the webpage, down and up.
Anchor Element On-hover
The CSS rule for each of the three anchor elements on-hover is:
div.navbar a:hover {
background: #ddd;
color: black;
}
When the mouse pointer goes over any of the anchor elements, the background color becomes #ddd (light gray) and the color of text becomes black (for contrast).
The Complete Webpage Code
And there you have it: the complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Top Fixed Menu</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;}
div.navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
div.navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
font-size: 17px;
text-decoration: none;
}
div.main {
padding: 16px;
margin-top: 30px;
height: 1500px; /* Used in this example to enable scrolling */
}
div.navbar a:hover {
background: #ddd;
color: black;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
<h1>Fixed Top Menu</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
</body>
</html>
The reader should copy the code into a text editor. Save the file with any name, but with the extension, .html . Open the file in the browser. Scroll down and up to see the menu remain fixed.
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 . . .NEXT