How TO - Fixed Menu
Learn how to create a "fixed" menu with CSS.
How To Create a Fixed Top Menu
Step 1) Add HTML:
Example
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="main">
<p>Some text some text some text some text..</p>
</div>
Step 2) Add CSS:
To create a fixed top menu, use position:fixed and top:0. Note that the fixed menu will overlay your other content. To fix this, add a margin-top (to the content) that is equal or larger than the height of your menu.
Example
/* The navigation bar */
.ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0;
/* Position the navbar at the top of the page */
width:
100%; /* Full width */
}
li {
float: left;
}
li a {
display: block;
color: white;
padding: 16px;
text-decoration: none;
}
/* Main
content */
.main
{
margin-top: 30px; /* Add a top margin to avoid content overlay */
}
Try it Yourself »
How To Create a Fixed Bottom Menu
To create a fixed bottom menu, use position:fixed and
bottom:0:
Example
/* The navigation bar */
.ul {
position: fixed; /* Set the navbar to fixed position */
bottom: 0;
/* Position the navbar at the top of the page */
width:
100%; /* Full width */
}
/* Main
content */
.main
{
margin-bottom: 30px; /* Add a bottom margin to avoid content overlay */
}
Try it Yourself »
Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.
